CSS3实现多重边框

系列文章目录

CSS3半透明边框（1）

---

---

前言

在CSS中使用box-shadow与outline（轮廓）两种方案实现多重边框。

---

一、box-shadow是什么？

box-shadow属性是用来描述元素一个或者多个阴影效果。

• inset（可选值，不设置，为外投影，设置，为内投影。有人也喜欢放在最后，只要浏览器支持）
• x-offset（阴影水平偏移量，正方向为right）
• y-offset（阴影垂直偏移量，正方向为bottom，如果 x-offset和y-offset都是0，阴影则位于元素后面）
• blur-radius（阴影模糊半径，为正，0为无模糊效果，值越大，阴影越模糊）
• spread-radius（阴影扩展半径，可正可负，正值时，阴影扩大，负值时，阴影收缩，默认为0，此时阴影与元素同样大）
• color（颜色）

需要注意的是，box-shadow是层层叠加的，第一层投影位于最顶层，如果想要在外圈增加一道5px的外框，那就需要指定的扩张半径为15px（10px+5px）。

二、代码

1.html

<template>
    <div class="father">
        <div class="test">
        @犬莱八荒
        </div>
    </div>
</template>

2.css3样式

<style lang='scss'>
    .father{
        height: 14em;
        width: 20em;
        background: white;
        display: flex;
        align-items: center;
        justify-content: center;
        .test{
            height: 7em;
            width: 10em;
            box-shadow: 0 0 0 10px #655,
                        0 0 0 15px greenyellow,
                        0 0 0 20px deepskyblue,
                        0 0 0 25px yellowgreen,
                        0 2px 5px 30px rgba(0,0,0,.6);
        }
    }
</style>

3.效果

投影行为与边框不完全一样，不会影响布局且不影响box-sizing属性的影响。设置的加的“边框”出现在元素的外围，它们不会响应鼠标事件，比如悬停或者点击。如果想要响应事件，则可以在bosx-shadow属性中添加inset关键字

三、outline是什么？

如果只需要两层边框，可以先设置一层边框，再加上outline（轮廓）产生的边框就能实现样式。假设我们要产生虚线边框效果的话，box-shadow就不能处理了。

四、代码

1.css3样式

	border: 10px solid #655;
    outline: 5px solid deepskyblue;

2.效果图

3.车缝线效果

    background: black;
    outline: 1px dashed white;
    outline-offset: -15px; 

outline-offset是设置或检索对象外的线条轮廓偏移容器的值。

---

总结

在CSS中使用box-shadow与outline（轮廓）两种方案实现多重边框。但是outline 只能适用于双层边框的场景，不能通过逗号分隔多个值，如果说想要更多层的边框，使用box-shadow就是我们唯一的选择了。