css多重边框的添加

一、box-shadow方案

       box-shadow接受五个参数值，分别为水平偏移量、竖直偏移量、blur(模糊半径)、spread(扩散范围)、color.

       spread可接受正值或负值，可以让阴影面积增大或减小，一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值，得到的投影就像一条实线边框。

代码如下：

   background-color: yellowgreen;
   box-shadow: 0 0 0 10px #65a;

效果如下图：

 

更重要的是box-shadow支持逗号分隔语法，我们可以创建任意数量的投影，再次为该盒子添加一个粉色边框，代码如下：

 background-color: yellowgreen;
            box-shadow: 0 0 0 10px #65a,
                        0 0 0 20px pink;

效果如下：

 

 

需要注意的是，box-shadow是层层叠的，第一层投影为与最顶层，以此类推。因此，我们需要按规律调整扩散范围。比如说在第一层边框之外我们还想添加一个10px的边框，那么就需要指定扩散范围的值为20px(10px+10px)。

初次之外，我们还可以给这个盒子的最外层添加一层常规的投影，代码如下：

background-color: yellowgreen;
            box-shadow: 0 0 0 10px #65a,
                        0 0 0 20px pink,
                        0 2px 5px 30px rgba(0,0,0,.5);

效果如下图：

 

多重投影方案在大多数情况下都可以很好的工作，但是有一下注意事项：

（1）投影的行为和边框并不完全一致，因为它们并保护影响布局，而且也不会受到box-sizing这个属性的影响。不过，我们可以通过内边距或者外边距（这取决于投影的位置是内嵌的还是外扩的）来额外模拟出边框所需要的空间。

（2）根据以上方法添加的虚拟的“边框”出现在元素的外圈，它们并不会影响鼠标事件，如悬停或点击。

二、outline方案

在某些情况下，我们值需要为一个盒子添加两层边框，那么我们就可以为该盒子添加一层常规边框，然后再加上outline属性来添加外层边框，这种方法相对于第一种更加灵活。

代码如下

  background-color: yellowgreen;
            border:10px solid #65a;
            outline: 5px solid pink;

效果如下：

这种方法的另外一种好处是可以通过outline-offse属性来改变它和元素边缘之间的距离， outline-offse可以接受正值也可以接受负值。

设值一个正值10，代码如下

  background-color: yellowgreen;
            border:10px solid #65a;
            outline: 5px solid pink;
            outline-offset: 10px;

效果如下：

 

设置一个负值（-30px）,效果如下：

注意的点如下：

（1）只适用于双层边框，因为outline并不接受逗号分隔的多个值，如果需要三层及以上的边框，只能使用第一中方案来实现。

（2）边框不一定会贴合border-radius 产生的圆角，因此如果元素是圆角的，则描边依旧会是直角的。

效果如下：