前言
今天我们来介绍一下用 六种不同的 CSS 方法生成双边框的效果
首先回顾一下 三个 CSS 边框的属性：
border-color 边框的颜色、 border-width边框的宽度、 border-style 指定边框是实线、虚线、双线还是其他样式。
准备
首先，让我们在index.html创建六个div。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css" />
<title>Document</title>
</head>
<body>
<div class="box-1"> <h2>box 1</h2> <p>(border-style)</p> </div>
<div class="box-2"> <h2>box 2</h2> <p>(outline)</p> </div>
<div class="box-3"> <h2>box 3</h2> <p>(pseudo property)</p> </div>
<div class="box-4"> <h2>box 4</h2> <p>(box-shadow)</p> </div>
<div class="box-5"> <h2>box 5</h2> <p>(background-clip)</p></div>
<div class="box-6"> <h2>box 6</h2> <p>(linear-gradient())</p></div>
</body>
</html>
然后，在 style.css 文件内给每个div设置宽高为 350px，每个div都设置了不同的背景颜色以便区分，
代码如下：
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 350px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box-1{
background-color: green;
}
.box-2{
background-color: rebeccapurple;
}
.box-3{
background-color: brown;
}
.box-4{
background-color: yellow;
}
.box-5 {
background-color: violet;
}
.box-6{
background-color: aqua;
}
1、使用 CSS border-style 属性设置样式
border-style设置 double属性值：
.box-1{
background-color: green;
border-width: 15px;
border-color: red;
border-style: double;
}
border-style CSS 属性允许我们在框的四个边上设置元素的线条样式。
要创建双边框，使用 double 关键字。这会在两条边界线之间创建填充。我们还可以使用 border-[left/right/top/bottom] 在元素的特定一侧创建双边框样式。
2、使用 CSS outline 属性设置样式
接下来，使用 outline （轮廓）属性。轮廓和边框非常相似，轮廓不占用任何空间，因为它们是绘制在元素内容之外。
通过 outline 属性实现双边框效果，我们需要设置边框和轮廓。
与 border-style 不同的是， outline 不会在自身和边框之间创建间隙。所以我们需要使用 outline-offset 属性：
.box-2{
background-color: brown;
border: 5px solid yellow;
outline: 5px solid blue;
outline-offset: -20px;
}
如上代码所示， outline-offset 属性可用于向内调整轮廓（如设置负值，如 -20px ）或向外调整（如设置正值，如 5px ）
3、使用 CSS 伪元素属性设置样式
我们将为 box-3 设置边框和相对定位。然后，我们将使用 ::before 伪元素添加辅助边框：
box-3{
background-color: rebeccapurple;
position: relative;
border: 8px solid red;
}
.box-3::before{
content: " ";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border: 8px solid green;
}
box-3创建一个红色的外部边框。伪元素使用绝对定位设置绿色内部边框，并使用 top 、 left 、 bottom 和 right 值将调整两个边框之间的间距。
4、使用 CSS box-shadow 属性设置样式
接下来，使用 box-shadow 边框阴影设置。通过使用逗号分隔两个的阴影，将偏移和模糊设置设置为零，并为每个阴影赋予适当的大小，可以使边框阴影看起来像双边框：
.box-4{
background-color: yellow;
box-shadow:
0 0 0 5px red,
0 0 0 10px green;
}
在此示例中，第二个（绿色）阴影是第一个（红色）阴影的两倍，红色阴影盖住了绿色阴影，让我们觉得是同样的大小。
5、使用 CSS background-clip 属性设置样式
接下来，让我们使用 background-clip 属性在 box-5 元素上创建双边框效果。
.box-5{
border: 7px solid rgb(36, 85, 7);
padding: 5px;
background-clip: content-box;
background-color: violet;
}
在这里，CSS background-clip 是让元素的背景不作用在 padding 上。box-5 周围的间距，呈现白色边框的外观（实际上是padding）。
6、使用 CSS linear-gradient() 函数属性设置样式
最后，让我们使用 linear-gradient() 函数创建双边框。此功能可用于沿直线在两种或多种颜色之间产生渐变。
to 关键字构成了渐变线的起点。它指定渐变的方向（ left 、 right 、 top 或 bottom ）。如果未指定，则默认为 to bottom 。
我们也可以用角度来表示方向。值 to top 、 to bottom 、 to left 和 to right 分别对应于角度 0deg 、 180deg 、 270deg 和 90deg 。
在此示例中，我们首先为 box-6 元素指定 7px 的边框宽度和绿色。然后，我们在 background 属性上为每一侧设置线性渐变：
.box-6{
border: 7px solid rgb(36, 85, 7);
background: linear-gradient(to top, #8f0404 7px, transparent 1px), /* bottom border */
linear-gradient(to bottom, #8f0404 7px, transparent 1px), /* top border */
linear-gradient(to left, #8f0404 7px, transparent 1px), /* right border */
linear-gradient(to right, #8f0404 7px, transparent 1px); /* left border */
background-color: aqua;
}
此处，渐变从红色（宽度为 7px ）变为透明。透明渐变的宽度必须小于指定颜色，以消除任何淡化效果。
在这里我们可以并排看到所有的 CSS 双边框样式方法：
常见错误
设置 CSS 边框属性后边框不呈现的最常见原因是未设置border-style 属性，但 border-width 和 border-color 属性值可以留空。
总结
设置双边框的6种方法：
border-style: double边框样式-
outline轮廓+边框 -
box-shadow阴影+阴影重叠 -
background-clip边框+背景切割 -
::before边框+伪元素 -
linear-gradient边框渐变
全文完
谢谢！
开启AdminJS成长之旅！这是我参与「AdminJS · 2 月更文挑战」的第 8 天
点击查看活动详情