持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第30天，点击查看活动详情
通常情况下，我们设置边框只设置一重，边框的实现也非常简单，直接使用border即可。那么如果要实现两个边框甚至更多呢？有没有什么办法可以实现呢？今天就带大家来揭秘css之box-shadow。
设置边框
实线边框
border方案
.demo {
width: 100px;
height: 100px;
background-color: yellowgreen;
border: 10px solid #333;
}
box-shadow方案
.demo {
width: 100px;
height: 100px;
background-color: yellowgreen;
box-shadow: 0 0 0 10px #333;
}
outline方案
.demo {
width: 100px;
height: 100px;
background-color: yellowgreen;
outline: 10px solid #333;
}
非实线边框
border
.demo {
width: 100px;
height: 100px;
background-color: yellowgreen;
border: 10px dashed #333;
}
box-shadow
根据属性来看没有设置虚线的关键字，此轮被KO。
outline
.demo {
width: 100px;
height: 100px;
background-color: yellowgreen;
outline: 10px dashed #333;
}
能将虚线缩到方形内部吗？难道outline只能out??
谢天谢地，我们有outline-offset属性，真是神兵天降啊，完美解决：
异同点
以上三种都可以实现类似边框的效果，需要特别注意的是box-shadow和outline设置的“边框”不占据空间。举个例子：
有点意思，这里面还有值得探讨的地方，这边就不展开了，不是今天的主题。我们继续往下说。
双重边框
border?
不好意思，border没有这种魔法。下一位
outline
我靠，outline有点东西啊，这都行？不过这个10px应该是被分成了3份了，量了一下，由内至外分别是3px,4px,3px。我换成12px是4px,4px,4px。所以是平均分了。
来个动图感受一下：
虽然能画两个边框，但是这两个边框中间总是有空白？空有一身本事，但是不符合我们的需求呢。下一位
box-shadow
啥也不说了，直接亮出真本事：
牛皮，甚至可以设置多个边框呢：
多个边框还得是box-shadow啊!yyds。
大赛结果
经过大赛组委会讨论决定，box-shadow获得此次冠军，但是border和outline也别气馁，在特定的场景，你们也能发挥出巨大的作用，感谢有你们，css的世界才更加丰富多彩。
参考
《CSS揭秘》纸质书本
往期精彩
# 我用一个div就画出了一个大西瓜~(box-shadow魔法)
