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

原创

腾讯IVWEB团队

修改于 2017-06-30 18:05:02

9640

修改于 2017-06-30 18:05:02

文章被收录于专栏：腾讯IVWEB团队的专栏

作者：莫卓颖

背景

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