@多重边框

首先呢，多重边框，从字面上理解就知道我们的目标是希望目标元素的边框是一层又一层的。

很显然，border-image这种东西就不要考虑啦~ LEA姐姐告诉我们通过box-shadow这个属性能够实现多重边框：

 box-shadow: *h-shadow* *v-shadow* *blur* *spread* *color* inset;

神奇的是一个box-shadow里面可以写好多组
类似于上面的数值，这就比border（只有一层）好用多了有木有！而如果只希望呈现出一般solid边框的效果，只需要酱紫：

.wrapper{
   margin: 300px auto; 
   width: 300px; 
   height: 200px; 
   background: yellowgreen; 
   box-shadow: 0 0 0 10px purple,0 0 0 15px pink,0 0 0 25px #ccc,0 0 0 30px orange inset;
}

CSS Secrets @多重边框 - CSS娃娃 - CSS娃娃的博客

但是亲们发现没有，有两点是需要我们稍微留心一下的：

1. 每一组值当中的shadow宽度并不是在前一组值的基础上计算的，而是都相对于div.wrapper的“边”来计算；
2. 在颜色后面加上一个inset，边框就真的跑到里面去了呢~

然而我会告诉你还有两点也需要注意吗？

1. box-shadow不会被box-sizing所影响；
2. :hover的时候，box-shadow（outside the div）的部分是不会被算在内噢~

当我们只需要两层边框的时候，除了border之外，别忘了还有个outline在默默地等候着我们的召唤。

 .wrapper{
    margin: 300px auto; 
    width: 300px; 
    height: 200px; 
    background: yellowgreen; 
    border: 10px solid pink; 
    outline: 5px dashed purple;
}

CSS Secrets @多重边框 - CSS娃娃 - CSS娃娃的博客

outline好包容，它把border都紧紧怀抱住了！
moreover，还有个outline-offset也比较讨人喜欢呢！

.wrapper{
    margin: 300px auto;
    width: 300px;
    height: 200px;
    background: yellowgreen;
    border: 10px solid pink;
    outline: 5px dashed purple;
    outline-offset: -20px;
}

CSS Secrets @多重边框 - CSS娃娃 - CSS娃娃的博客

只要将outline-offset的值设为负数，它就有可能跑到div.wrapper的里面， LEA姐姐说这是缝边的效果。
But！尽管它跑到了.wrapper的里面，但它多border的爱是不变的，因为这个负值还是从border的最外面开始算起的！真爱啊有木有！

further more，亲们要知道，outline虽然很包容，但它不能因为border-radius的存在而改变自己那么方的实质。outline很方，至少现在很方。但是呢~ box-shadow就可以因为有border-radius的存在而产生一层一层又一层的圆角！看下方！上面是box-shadow的表现，下面是outline的表现（瞧他是有多么固执，但是说不定哪一天，它就弯了，哇哈哈哈哈......）。

CSS Secrets @多重边框 - CSS娃娃 - CSS娃娃的博客

CSS Secrets @多重边框 - CSS娃娃 - CSS娃娃的博客