为元素添加边框，你有多少种好办法？
背景
相信大家在做项目的过程中会经常遇到这样的一个需求，鼠标hover到某个元素的时候为这个元素添加边框，这个简单的需求仅需注意添加边框后不会对原有的位置造成布局的影响从而造成布局跳动。本文将会试图探讨完成这个简单需求的方法。
方案一
实现思路：为元素中预先设置边框，边框的颜色与元素所在父元素背景色一致，边框大小与hover时候的边框大小一致，鼠标hover过元素的时候只需要设置边框颜色便可。 兼容问题：无 实现代码：
html结构
<ul class="parent">
<li>
</li>
<li>
</li>
</ul>CSS
.parent{
width: 500px;
background: #000;
overflow: hidden;
}
.parent li{
width: 200px;
background: red;
border: 2px solid #000;
margin-right: 2px;
height: 200px;
float: left;
}
.parent li:hover{
border:2px solid yellow;
}方案二
实现思路：首先设置元素为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;
}方案三
实现思路：当hover过元素的时候，利用设置属性box-sizing设置容器为怪异模式，即设置盒模型为 容器width = border + padding + 内width 兼容问题：
实现代码：
HTML结构
<ul class="parent">
<li>
</li>
<li>
</li>
</ul>CSS
.parent{
width: 500px;
background: #000;
overflow: hidden;
}
.parent li{
width: 200px;
background: red;
margin-right: 2px;
height: 200px;
float: left;
}
.parent li:hover{
box-sizing:border-box;
border: 2px solid yellow;
}方案四
实现思路：当hover过元素的时候，利用h5的新属性box-shadow为元素添加实体的阴影作为边框 兼容性：
实现代码：
HTML结构
<ul class="parent">
<li>
</li>
<li>
</li>
</ul>CSS
.parent{
width: 500px;
background: #000;
overflow: hidden;
}
.parent li{
width: 200px;
background: red;
margin-right: 2px;
height: 200px;
float: left;
}
.parent li:hover{
box-sizing:border-box;
box-shadow: inset 2px 2px 0 0 yellow,inset -2px -2px 0 0 yellow;
}您还能想到其他好办法为hover的元素加"套"么？欢迎留言讨论
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读