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不支持)