需求

在不增加冗余结构的情况下，只使用CSS绘制多重边框，如下图所示。

image.png

方法

• box-shadow方案
  box-shadow的第四个参数（称为扩张半径），通过指定正/负值，可以让投影面积增大/减小。可用来模拟边框。

.box {
  border: 10px solid #ccc;
  box-shadow: 0 0 0 10px #efdada,
              0 0 0 20px rgb(234, 137, 137);
}

（box-shadow可用逗号分隔，从而指定多个边框）

• outline方案
  只需要两层边框的时候，外层边框可借助outline实现。

.box {
  outline: 10px solid #efdada;
}

(outline-offset属性可以控制它和元素之间的间距，可为负）