想到多重边框,我们可能会通过多个元素来模拟实现,但是如何在一个元素上实现多重边框呢?如下图:
1、box-shadow
我们可以通过box-shadow来实现。
box-shadow: h-shadow v-shadow blur spread color inset | outset;
分别是:水平阴影位置 垂直阴影位置 模糊距离 扩张半径 颜色 内部阴影或者外部阴影
实现多重边框我们可以通过扩张半径来实现,box-shadow可以通过逗号分隔设置多个值。
注意:
- box-shadow是层层叠加的,第一次的在最上面,以此类推,因此后面的都是(2px+2px);
- 投影和边框不同,它不影响布局,不会受box-sizing的影响,可以通过padding或者margin来模拟box-shadow所需要的空间
- 如果是按钮等需要鼠标的点击或者悬停效果的,这时你可以将box-shadow设置为inset,通过padding来留出所需的空间
.test-list{
width: 100px;
height: 100px;
background: red;
border: 2px solid orange;
box-shadow: 0 0 0 2px yellow,0 0 0 4px green,0 0 0 6px burlywood;
margin: 6px;
border-radius: 10px;
}
<div class="test-list"></div>
2、outline
box-shadow只能实现实线边框,对于虚线的边框我们应该怎么办呢?
注:可以通过outline-offset属性来控制他和元素边框之间的间距,这个属性值设置可以接收负值。
但是使用的时候以下的地方需要注意:
- outline不支持逗号分隔的多个属性,因此,这种只适用于双层边框;
- outline不会贴合border-radius产生圆角的效果,只适用于方形
.test-list{
width: 100px;
height: 100px;
background: red;
border: 2px dashed green;
outline: 2px dashed orchid;
background-clip: content-box;
}
<div class="test-list"></div>
效果如下: