【CSS】多重边框

90507-106.jpg

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

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

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;
}

image.png

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

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;
}

image.png

正常添加阴影的话，填好以上参数就行。
box-shadow: 5px 5px 10px #888;

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

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

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

以上是添加阴影的基础部分,下面开始制作多重边框

---

多重边框

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

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;
}

image.png

如果需要设置多重边框，可以用逗号分隔语法，这样就可以创建任意数量的投影了。
box-shadow: 0 0 0 10px #9c0 , 0 0 0 20px #ffc, 0 0 0 30px #9cf;

image.png

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

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

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

---

outline

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

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

    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;

image.png

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

    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;

image.png

outline 设置成 2像素的白色虚线。
通过 outline-offset 方法把 outline 设置在元素内部（负值），此时看上去就有点像是缝边的效果。

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

image.png

---

希望以上笔记对大家有帮助。
我的其他笔记在微信公众号：Rabbit_svip

image.png