使用 box-shadow 代替 border

在前端开发中给一个 div 添加边框,一般是使用border属性。

如下:

<div class="box">
</div>

CSS

.box {
  background: blue;
  width: 100px;
  height: 100px;
  border: 3px solid red;
}

效果图:

使用box-shadow实现

使用box-shadow也可以实现类似效果。

box-shadow: 0 1px 0 0 red; /* Border bottom */
box-shadow: 0 -1px 0 0 red; /* Border top */
box-shadow: -1px 0 0 0 red; /* Border left */
box-shadow: 1px 0 0 0 red; /* Border right */
box-shadow: 0 0 0 1px red; /* All the borders by using the spread properties */

为什么要使用box-shadow

遇到了这样一个需求,当这个box被hover的时候,出现一个边框,这时候就会涉及一个盒模型的问题,当使用border的时候,会修改盒模型,但box-shadow不会。

如图:

使用 border 的盒模型如下:

使用 box-shadow

结语

所以如果你想添加一个border且不改变盒模型(也就是页面布局)的话,可以尝试使用box-shadow 代替 border

参考

https://www.codementor.io/michelre/using-box-shadow-to-construct-a-border-ex0rpxvng

 标签: CSS, 前端开发

作者  :  sailor

一蓑烟雨看苍生,半壶浊酒笑红尘



最新文章