爲元素添加邊框的幾種思路。

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