为元素添加边框的几种思路。

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