你的位置:首页 > 网页设计

[网页设计]为元素添加边框的几种思路。


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

我们有时候需要为元素添加一个边框,比如鼠标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不支持)