为元素添加边框，你有多少种好办法？

腾讯云技术社区-掘金主页持续为你们呈现云计算技术文章，欢迎你们关注！

---

做者：莫卓颖

背景

相信你们在作项目的过程当中会常常遇到这样的一个需求，鼠标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的元素加"套"么？欢迎留言讨论

原文连接：ivweb.io/topic/565c4…

相关推荐
前端识别验证码思路分析
上云之路，从选购云服务器开始
Service Worker 全面进阶

---

此文已由做者受权腾讯云技术社区发布，转载请注明文章出处
原文连接：www.qcloud.com/community/a…
获取更多腾讯海量技术实践干货，欢迎你们前往腾讯云技术社区