为元素添加边框,你有多少种好办法?

1,897 阅读3分钟

腾讯云技术社区-掘金主页持续为大家呈现云计算技术文章,欢迎大家关注!


作者:莫卓颖

背景

相信大家在做项目的过程中会经常遇到这样的一个需求,鼠标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…
获取更多腾讯海量技术实践干货,欢迎大家前往腾讯云技术社区