多重边框

box-shadow 方案

我们大多数人可能已经用过（或滥用过）box-shadow 来生成投影。不太为人所知的是，它还接受第四个参数（称作“扩张半径”），通过指定正值或负值，可以让投影面积加大或者减小。

.box{
    background: yellowgreen;
    width: 200px;
    height: 100px;
    margin: 50px auto;
    box-shadow: 0 0 0 10px #655;
}

效果一

多重阴影

.box{
    background: yellowgreen;
    width: 200px;
    height: 100px;
    margin: 50px auto;
    box-shadow: 0 0 0 10px #655,
                0 0 0 20px deeppink;
}

效果二

outline 方案

描边的另一个好处在于，你可以通过 outline-offset 属性来控制它跟元素边缘之间的间距，这个属性甚至可以接受负值。

.box{
    width: 200px;
    height: 100px;
    margin: 50px auto;
    background: #655;
    border-radius: 5px;
    outline: 2px dashed #fff;
    outline-offset: -10px;
}

效果三