为元素添加边框，有多少种好方法

来源：互联网发布：云计算入门编辑：程序博客网时间：2024/04/30 03:22

转载：http://imweb.io/topic/565c485dbb6a753a136242bf

背景

相信大家在做项目的过程中会经常遇到这样的一个需求，鼠标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;  }

0 0