http://wishing.vip/ 这是我的移动断h5地址，里面有很多例子。
我们有时候需要为元素添加一个边框，比如鼠标hover时元素添加一个好看的边框，要求不能对原有的位置造成布局的影响。
思路一
为元素预设边框，颜色与元素一致，大小与hover的时候一致，鼠标hover过元素只要设置颜色即可。
优点：不存在兼容问题。
思路二
为元素设置position:relative,然后添加额外隐藏的边框，鼠标hover的时候显示隐藏的边框即可。
HTML元素
<ul class="parent">
<li> <div class="bd"></div> </li>
<li> <div class="bd"></div> </li>
</ul>
CSS样式
.parent{ width: 500px; background: #000; overflow: hidden; }
.parent li{ position: relative; width: 200px; background: red; border: 2px solid #000; margin-right: 2px; height: 200px; float: left; }
.parent li .bd{ display: none; left: 0; top:0; width:198px; height: 198px; border: 2px solid yellow; } .parent li:hover .bd{ display: block; }
优点：不存在兼容问题。
思路三
利用设置属性box-sizing设置容器为怪异模式，此时容器盒模型宽度=border+padding+内宽。
关键代码
.parent li:hover{ box-sizing:border-box; border: 2px solid yellow; }
兼容性：好。(ie8+，android4.1+,chrome43+等等所有现代浏览器)
思路四
当hover过元素的时候，利用H5新属性box-shadow为元素添加实体的阴影作为边框。
关键代码
.parent li:hover{ box-sizing:border-box; box-shadow: inset 2px 2px 0 0 yellow,inset -2px -2px 0 0 yellow; }
兼容性：好。(ie9+，android4.1+,chrome43+等等所有现代浏览器，Opera Mini不支持)
