《css揭秘》--【2】多重边框

怎么实现‘多重边框’？

提到‘多重边框’你能想到几种实现方法？

 1. 多个元素模拟多重边框

<div style="border:1px solid black;">
  <div style="border:1px solid red;">
      <div style="border:1px solid green;">css揭秘</div>
  </div>
</div>

    可参考这个，这里不具体介绍了。

   3. box-shadow方案

box-shadow用来生成投影，它的参数有：

• h-shadow:（必须）水平阴影
• v-shadow:（必须）垂直阴影
• blur: 模糊的距离
• spread: 阴影的尺寸
• color: 阴影的颜色
• insert: （outset）

一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值，得到的‘投影’其实就像一道实线边框。

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

box-shadow的好处在于，它支持逗号分隔语法，我们可以创建任意数量的投影。

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

效果图如下：

注： 

1. box-shadow是层层叠加的，第一层投影位于最顶层，依次类推。因为，你需要按此规律调整半径，比如上面例子中的第一层是10px，第二层你想要是10px你就需要设置成20px。

2. 假如想要模拟虚线边框效果，这个方案好像没辙了。

4. outline方案

在某些情况下，你可能只需要两层边框，那就可以先设置一层常规边框，再加上outline（描边）属性来产生外层的边框。

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

可实现3方案同样的效果。

注： 

1. 它只试用于双层边框的场景；

2. outline产生的边框不一定会贴合border-radius属性产生的圆角；

另：

outline可以实现简单的‘缝边’效果；

background: #655;
border-radius: 4px;
outline: 1px dashed white;
outline-offset: -4px;

ok，就到这里吧，蟹蟹。^_^