一、半透明边框（background-clip）

html

<div class="box test-box"></div>

css

.box{
    width: 200px;
    height: 200px;
    margin: 200px auto;
    
}
/* 半透明边框 */
.test-box{
    background-color: rgb(4, 0, 255);
    border: 5px solid rgba(4, 0, 255, 0.5);
}

效果：边框颜色跟背景色是一致的，没有达到我们想要的效果。

 

 

 原因：元素的背景默认是延伸边框里的，所以视觉上看来是透明度没有实现。

解决方法：使用background-clip属性来重新限制背景的延伸。

在test-box里使用该属性，设置为只延伸到内边距盒子。

.test-box{
    background-color: rgb(4, 0, 255);
    border: 5px solid rgba(4, 0, 255, 0.5);
    background-clip: padding-box;
}

 

 

 

二、多层边框（outline、box-shadow）

两种方案：

方案一：使用box-shadow属性。

对于box-shadow属性，我们通常只使用前三个种值,分别为x偏移量、y偏移量和模糊程度。

但是还有第四个值：扩展半径。

如果没有设置，则默认为0，阴影面积跟元素面积一致。

如果取值大于0，则阴影面积向外扩展。

如果取值小于0，则阴影面积向内收缩。

所以利用这个值，我们可以多加一层外边框

html

<div class="box test-box1"></div>

css

.box{
    width: 200px;
    height: 200px;
    margin: 200px auto;
    
}

/* 使用box-shadow设置多层边框 */
.test-box1{
    border: 5px solid rgba(4, 0, 255,1);
    box-shadow: 0 0 0 5px gray;
}

效果

 

 

 可以同时添加多个阴影

.test-box1{
    border: 5px solid rgba(4, 0, 255,1);
    box-shadow: 0 0 0 5px gray,
                0 0 0 10px red,
                0 0 0 15px green;
}

效果：要注意增加扩展半径，否则会后面的第一个阴影覆盖掉。所以第二层阴影要扩大到10，才能导致第二边框为5px。

依次类推，每加一层边框，则要多加5px

 

 

 同时，使用box-shadow属性生成的边框会受border-radius属性的影响。

我们在test-box里面使用该属性。

.test-box1{
    border: 5px solid rgba(4, 0, 255,1);
    box-shadow: 0 0 0 5px gray,
                0 0 0 10px red,
                0 0 0 15px green;
    border-radius: 5px;
}

效果：

 

 

 缺点：边框样式只能使用实线边框。

 

方案二：使用outline属性。

outline属性有4个值，分别为宽度、类型、颜色以及间隙，我们可以设置前三个值来给元素添加轮廓。

html

<div class="box test-box2"></div>

css

.box{
    width: 200px;
    height: 200px;
    margin: 200px auto;
    
}

/* 使用outline属性设置多层边框 */
.test-box2{
    border: 5px solid rgba(4, 0, 255,1);
    outline: 5px solid red;
}

效果：

 

 

我们可以设置其他风格的格式。

.test-box2{
    border: 5px solid rgba(4, 0, 255,1);
    outline: 5px dashed red;
}

效果：

 

 outline-offset可以取正值或者负值，代表与边框的距离。

左边为负值，右边为正值。

 

 

缺点：

1、只能加一层边框

2、当边框设置为圆角时，不会被影响。

 

 

以上两种方式根据实际情况选择。