这个笔记参考了

方法1：box-shadow

要设置多重边框，最要用到的是box-shadow这个样式。

box-shadow 的作用是添加投影。

如果要设置多个阴影，还可以用逗号进行分别设置。

正常添加阴影的话，填好以上参数就行。

box-shadow: 5px 5px 10px #888;

• 第一个参数：横向偏移的值（负左，正右）

• 第二个参数：纵向偏移的值（负上，正下）

• 第三个参数：投影的半径，也就是羽化。值越大，模糊和扩散的程度越大。

多重边框

要用 box-shadow 来设置多重边框，需要用到 另一个不常用的参数（扩张半径），同时前3个参数要设置为0。即偏移量和模糊值都为0。

如果需要设置多重边框，可以用逗号分隔语法，这样就可以创建任意数量的投影了。

box-shadow: 0 0 0 10px #9c0 , 0 0 0 20px #ffc, 0 0 0 30px #9cf;

需要注意的是， 是层层叠加的，也就是说第一层投影位于顶层，以此类推。因此，需要做的是按照这个规律来调整扩张的半径。

就比如在这个例子中，第一个投影用了10px，第二个投影就要用大于10px的值才能看出效果，除非前一个投影设置了半透明颜色。

缺点：

用 设置的多重边框最大的缺点就是不能设置虚线等其他样式的边框。

方法2：outline

如果只是需要2层边框，可以先设置一层常规边框 ，再加上 （描边）属性来产生外层的边框。

设置参数的方法和 border 是一样的。

还可以设置成虚线，同时通过  可以设置 和元素边缘之间的距离。

设置成 2像素的白色虚线。

通过 方法把 设置在元素内部（负值），此时看上去就有点像是缝边的效果。

缺点：

用outline设置的边框不能产生圆角效果。也就是不会贴合元素的圆角。