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

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

~~~~~~~山腰四柳酒兒要酒器~~~~~~~

我們有時候需要為元素添加一個邊框，比如滑鼠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不支援)