box-shadow 方案
box-shadow 大家应该都不陌生,是用来设置投影的。不太为人所知的是,它还接受第四个参数(称作“扩张半径”),取正值时,阴影扩大;取负值时,阴影收缩。默认为0,此时阴影与元素同样大。
一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值(即前三个参数都为0),得到的"投影"其实就是一道实线边框。
// css
div {
width: 100px;
height: 60px;
margin: 25px;
background: #e666ff;
box-shadow: 0 0 0 10px #ffff4d;
}
// html
<div></div>
如上功能完全可以直接用 border 属性来做,但 box-shadow 的优势在于,它支持逗号分隔语法,可以创建任意数量的投影。因此,可以基于上面的示例再加上一道边框。
div {
width: 100px;
height: 60px;
margin: 25px;
background: yellowgreen;
box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;
}
可以看到确实做到二层边框了,可是我明明 deeppink 设置的扩张半径是 15px,为什么看起来那么窄?
实际上这是由于 box-shadow 是层层叠加的,第一层投影位于最顶层,依次类推。所以第一层颜色为 #655 的投影会覆盖 deeppink 的投影,导致 deeppink 只显示出 5px(15px-10px)。
基于这种做法,可以实现任意层数的边框,当然也可以加一层常规的投影:
div {
width: 100px;
height: 60px;
margin: 25px;
background: yellowgreen;
box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink,
0 2px 5px 15px rgba(0, 0, 0.6);
}
outline 方案
如果只需要两层边框,那么这时也可以采用 outline 属性。
div {
width: 100px;
height: 60px;
margin: 25px;
background: yellowgreen;
border: 10px solid #655;
outline: 5px solid deeppink;
}
可以看到,效果跟上面采用 box-shadow 是一样的,并且 box-shadow 只能模拟实线边框,而 outline 还可以实现虚线边框等。只要将 outline 属性值里的 solid 改成 dashed 即可:
div {
outline: 5px dashed deeppink;
}