第三章、多重边框

box-shadow方案

box-shadow还接受第四个参数，表示扩张半径，可以使用第四个参数来模仿边框。

background: yellowgreen;
box-shadow: 0 0 0 10px #655; // 视觉效果上类似于 border: 10px solid #655;

因为box-shadow可以使用逗号分隔语法生成多个阴影，利用这一特点可以实现多重边框。

background: yellowgreen;
box-shadow: 0 0 0 10px #655,
            0 0 0 15px deeppink,
            0 0 0 20px blue;

使用多个阴影时，阴影之间层层叠加，第一层阴影位于最顶端，依次类推。需要注意的是：因为阴影不会影响布局，所以阴影生成的边框也不会影响布局，并且不会响应元素上的鼠标事件，如果想要阴影响应鼠标事件，可以将阴影改为内部阴影，再加上额外的内边距来保证盒子的大小不发生变化（在没有设置box-sizing属性时，只是视觉效果上的没有变化）。

box-shadow: 0 0 0 5px blue inset,
            0 0 0 10px deeppink inset,
            0 0 0 20px #655 inset;
padding: 20px;
// 由于阴影在盒子内部，加上额外的内边距之后，盒子视觉上总大小不变，但是阴影部分也会相应鼠标事件，注意外边框改内边框时颜色的顺序变化。

box-shadow方案只能生成实现的边框。

outline解决方案

当只需要两层边框时，可以使用outline属性。

background: yellowgreen;
border: 10px solid #655;
outline: 5px solid deeppink;

outline方案的优势在于可以生成虚线边框：

background: yellowgreen;
border: 10px solid #655;
outline: 5px dashed deeppink;

outline的另一个好处在于可以使用outline-offset属性来控制描边与边框之间的距离，并且可以为负值，可以利用这一特点来实现内部边框效果。

background: #655;
outline: 1px dashed white;
outline-offset: -10px;

需要注意的是outline目前不会贴合圆角，未来可能会改变这一现象。

background: yellowgreen;
border-radius: 10px;
outline: 1px solid #655;