这个笔记参考了《CSS揭秘》
方法 1：box-shadow
要设置多重边框，最要用到的是 box-shadow 这个样式。
box-shadow 的作用是添加投影。
<style>div { width: 300px; height: 300px; margin: 100px auto; background: #c33; border: 10px solid #036; color: #fff; font-size: 30px; text-align: center; line-height: 300px; box-shadow: 5px 5px 10px #888;}</style>
复制代码
如果要设置多个阴影，还可以用逗号进行分别设置。
<style>div { width: 300px; height: 300px; margin: 100px auto; background: #c33; border: 10px solid #036; color: #fff; font-size: 30px; text-align: center; line-height: 300px; box-shadow: 5px 5px 10px #888, 10px 10px 10px #9c0;}</style>
复制代码
正常添加阴影的话，填好以上参数就行。
box-shadow: 5px 5px 10px #888;
复制代码
多重边框
要用 box-shadow 来设置多重边框，需要用到 box-shadow 另一个不常用的参数（扩张半径），同时前 3 个参数要设置为 0。即偏移量和模糊值都为 0。
<style>div { width: 300px; height: 300px; margin: 100px auto; background: #c33; border: 10px solid #036; color: #fff; font-size: 30px; text-align: center; line-height: 300px; box-shadow: 0 0 0 10px #9c0;}</style>
复制代码
如果需要设置多重边框，可以用逗号分隔语法，这样就可以创建任意数量的投影了。
box-shadow: 0 0 0 10px #9c0 , 0 0 0 20px #ffc, 0 0 0 30px #9cf;
复制代码
需要注意的是，box-shadow 是层层叠加的，也就是说第一层投影位于顶层，以此类推。因此，需要做的是按照这个规律来调整扩张的半径。
就比如在这个例子中，第一个投影用了 10px，第二个投影就要用大于 10px 的值才能看出效果，除非前一个投影设置了半透明颜色。
缺点：
用 box-shadow 设置的多重边框最大的缺点就是不能设置虚线等其他样式的边框。
方法 2：outline
如果只是需要 2 层边框，可以先设置一层常规边框 border ，再加上 outline（描边）属性来产生外层的边框。
outline 设置参数的方法和 border 是一样的。
<style>div { width: 300px; height: 300px; margin: 100px auto; background: #c33; color: #fff; font-size: 30px; text-align: center; line-height: 300px; border: 10px solid #036; outline: 10px solid #9c0;}</style>
复制代码
outline 还可以设置成虚线，同时通过 outline-offset 可以设置 outline 和元素边缘之间的距离。
<style>div { width: 300px; height: 300px; margin: 100px auto; background: #369; color: #fff; font-size: 30px; text-align: center; line-height: 300px; outline: 2px dashed #fff; outline-offset: -16px;}</style>
复制代码
outline 设置成 2 像素的白色虚线。
通过 outline-offset 方法把 outline 设置在元素内部（负值），此时看上去就有点像是缝边的效果。
缺点：
用 outline 设置的边框不能产生圆角效果。也就是不会贴合元素的圆角。
评论