背景与边框--多重边框

多重边框

CSS3在草案阶段时就是否应该允许多重边框（就像多重背景）那样进行过多次讨论，当时认为该特性使用场景不够多，而且还可以使用border-image来达到相同效果，然而我们通常希望在CSS代码层面以更灵活的方式来调整边框样式，因此不得不进行各种hack，比如使用多个元素来模拟多重边框。

不过还有更好的办法来解决该难题，而无需添加无用的额外元素来污染结构。

box-shadow方案

可能有人已经用过box-shadow来生成投影，但其实它还接受第4个参数（扩张半径），通过指定正值或负值，来使投影面积增大或减小。一个正值的扩张半径加上两个为0的便宜量以及为0的模糊值，得到的投影其实就像一道实线边框，如下。

background: yellowgreen;
box-shadow: 0 0 0 10px #655;

效果如下：

box-shadow利用第四个参数来模拟实线边框

这也完全可以用border属性来生成完全一样的边框效果。不过box-shadow好处在于它支持逗号分隔语法，可以创建任意数量的投影，比如再加一道deeppink颜色的边框：

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

效果如下：

在上面基础上再增加一层deeppink颜色

注意：box-shadow层层叠加，第一层投影位于最顶层，以此类推。因此需要按半径扩张的规律调整。

如果愿意，甚至还可以在这些“边框”的底下再加一层常规投影：

background: yellowgreen;
box-shadow: 0 0 0 10px #655,
            0 0 0 15px deeppink,
            0 2px 5px 15px rgba(0,0,0,.6);

效果如下：

在上面基础上再增加一层常规投影

使用注意事项：

1. 投影的行为和边框不完全一致，因为它不会影响布局，也不受box-sizing影响。不过仍可以通过内边距或外边距（取决投影是内嵌还是外扩）来额外模拟边框所需要占据的空间

2. 上面创建出的“假边框”出现在元素外圈，因此它们并不会响应鼠标事件，如悬停或点击。如果这一点非常重要，可以给box-shadow加上inset关键字，来使投影绘制在元素的内圈，请注意此时需要增加额外的内边距来腾出足够空隙，如下，参数调整反过来。

background: yellowgreen;
padding: 10px;
box-shadow: inset
            0 0 0 10px #655,
            0 0 0 5px deeppink,
            0 2px 5px 5px rgba(0,0,0,.6);

添加inset关键字并扩充内边距以使整个元素空间响应鼠标事件

outline方案

某些情况下，可能只需要两层边框，这就可以先设置一层常规边框，再加上outline(描边)来产生外层边框。优点在于边框样式十分灵活，不像box-shadow方案只能模拟实线边框（假如需要产生虚线边框就无法应用），设置方案如下：

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

outline方案，适用于两层边框

描边可以通过outline-offset属性来控制它跟元素之间的间距，可以接受负值，对于某些效果十分有用，如下的简单缝边效果。

outline负值打造简单缝边效果

使用注意事项：

1. 只适用于双层边框场景，outline不支持逗号分隔多值

2. 边框不一定会贴合border-radius属性产生的圆角，因此如果元素是圆角的，它的描边可能还是指教的，这种行为被CSS工作组认定为是一个bug，未来可能会改为贴合border-radius圆角，效果如下：

border圆角，但outline直角

3. 根据CSS3基本UI特性规范，“描边可以不是矩形”。因此在实践中需要多加测试在不同浏览器中呈现的效果。