CSS揭秘：2.多重边框

---

多重边框

背景知识：box-shadow的基本用法，outline基本用法

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */

box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

以上是box-shadow的基本参数。box-shadow是为元素添加阴影效果的样式。但是我们可以通过对其属性的设置，呈现边框效果。

box-shadow 方案

box-shadow 单边框

1. 将x偏移量 ，y偏移量设置为0px，此时阴影会在元素下面不会超出元素本身。
2. 模糊度设为0px，使阴影呈现实体效果。
3. 增大扩散半径，可以理解为阴影向外扩展半径。
4. 此时阴影就像一条宽度为扩散半径的实线边框

box-shadow: 0px 0px 0px 10px rgba(0, 0, 0, 0.6);

box-shadow 多边框

box-shadow属性可以通过逗号分割添加多条阴影。

box-shadow: 0px 0px 0px 20px rgba(0, 0, 0, 0.6),
            0px 0px 0px 40px rgba(120, 120, 120, 0.6);

要注意的是，阴影是层层叠加的，第一条阴影在最上层，以此类推，且阴影的半径都是以元素border的外边沿为起点。所以如果你想要两条宽20px的阴影，那么两条阴影的扩散半径需要分别设置20px，40px

---

我们需要注意的是，阴影不会影响元素的布局，我们可以从它的字面意思，阴影来理解，它不占用任何空间。并且元素上的绑定事件，并不会在阴影上触发。效果如图

margin 填充空间

那么如果我们需要阴影像我们预期的一样，跟border有相同的表现，我们可以增加同样的外边框margin来模拟出阴影占据的空间。

margin: 40px;
box-shadow: 0px 0px 0px 20px rgba(0, 0, 0, 0.6),
            0px 0px 0px 40px rgba(120, 120, 120, 0.6);

background-clip

目前来讲，阴影的扩展方向都是从border外边沿向外扩。它虽然模拟出了空间，但是仍旧不会触发元素上的事件，如果你想在事件上也同border的表现一样，那么可以设置inset属性，使其向内扩散，并通过内边距padding来模拟空间。

padding: 40px;
background-color: black;
background-clip: content-box;
box-shadow: 0px 0px 0px 20px rgba(0, 0, 0, 0.6),
            0px 0px 0px 40px rgba(120, 120, 120, 0.6);

需要注意的是，边框的顺序发生了反转。如果阴影边框设置了透明度，因为涉及到透明度颜色叠加，需要自己取色。同样的透明度也会被背景色穿透，如果不想被背景色影响，可设置background-clip: content-box;

outline 方案

outline可以实现两条边框的方案，同时更加灵活可以实现虚线边框。
border 和 outline 很类似，但有如下区别：

1. 轮廓不占据空间（同阴影），绘制于元素内容周围。
2. outline不一定贴合圆角。
3. 我们可以通过outline-offset设置负值，来使轮廓显示在元素内部。

outline First Try

border: 10px solid blue;
outline: 10px solid skyblue;

不占据空间

outline Second Try

border: 10px solid blue;
outline: 10px solid skyblue;
border-radius: 20px;

不贴合圆角

outline Third Try

outline-offset 属性实现的缝边效果

background-color: #333;
outline: 2px dashed white;
border-radius: 20px;
outline-offset: -30px;

下一篇：CSS揭秘：3.灵活的背景定位

相关阅读

• CSS揭秘：1.半透明边框
• CSS揭秘：2.多重边框
• CSS揭秘：3.灵活的背景定位
• CSS揭秘：4.边框内圆角
• CSS揭秘：5.条纹背景（上）
• CSS揭秘：5.条纹背景（下）