边框在网页设计/开发中至关重要，因为它们可以引起用户的注意或分隔网页中的内容。 当您希望 HTML 元素上的所有四个边框都相同时，可以使用 border 速记。
另一方面，您还可以使用边框颜色、边框样式和边框宽度普通属性来使每个边框都不同/独一无二。 当您想指定边框的颜色时，我们使用边框颜色，使用边框宽度来确定边框的宽度，并使用边框样式属性指定边框是虚线、双线还是实线。
您还可以使用 border-block-start 和 border-top 等属性来定位单个边框
双边框是指两条平行线围绕着一个 HTML 元素。 两条线由一个间隙隔开，该间隙可以保持透明或填充图像或背景颜色。
例如，我们可以有一个双边框包围的注册/登录按钮。
为什么要双边框？
- 分隔：您可以使用双边框通过分隔不同的 HTML 元素来增加网页的可读性和可扫描性。 例如，您可以使用双边框来分隔网页上的页眉、正文和页脚等元素。
- 视觉吸引力：您可以在双边框上使用不同/对比色，使不同的元素更具视觉吸引力。
- 显示层次结构：您可以使用双边框清楚地区分网页上重要和次要的元素。
- 轻松定制：您可以借助双边框创建个性化和独特的设计。 例如，您可以更改每条线的颜色或宽度。
- 强调：使用双边框属性，您可以将注意力吸引到网页上的特定链接或按钮。
您可以使用以下方法在 CSS 中创建双边框。
使用 border-style 属性
border-style 属性设置元素四个边框的样式。 在这种情况下，我们使用 double 关键字来设置样式。 当我们使用 double 关键字时，会在两个边框之间创建自动填充。
出于演示目的，我们将边框宽度设置为 15px。 我们还将选择我们的边框颜色为红色，并将边框样式指定为双边框。
HTML 代码：
<!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" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2> Border Property</h2> </div> </body> </html>
CSS 代码：
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border-width: 15px;
border-color: red;
border-style: double;
}
输出将是：
使用 linear-gradient() 函数
此函数将线性渐变设置为背景图像。 结果是两种颜色之间沿直线逐渐过渡。 我们使用关键字to来标记渐变线的起点。 如果未指定顺序，则默认值为底部。
下面的代码给我们的盒子一个 7px 的边框宽度。 然后我们可以在框的每一侧的背景属性上指定线性渐变。
HTML 代码：
<!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" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2>linear-gradient() function</h2> </div> </body> </html>
CSS 代码：
*{
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{
border: 7px solid rgb(36, 85, 7);
background: linear-gradient(to top, #8f0404 7px, transparent 1px),
linear-gradient(to bottom, #8f0404 7px, transparent 1px),
linear-gradient(to left, #8f0404 7px, transparent 1px),
linear-gradient(to right, #8f0404 7px, transparent 1px);
}
输出将是：
使用大纲属性
轮廓是在元素边界外绘制的一条线。 这样就实现了双边框效果，我们可以用一个outline和一个single border。 我们必须使用 outline-offset 在 border 和 outline 属性之间添加一个空格。
HTML 代码：
<!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" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2>Outline Property</h2> </div> </body> </html>
CSS 代码：
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border: 5px solid red;
outline: 5px solid blue;
outline-offset: -20px;
}
呈现的页面将如下所示：
使用 box-shadow 属性
box-shadow 属性在元素的框架周围添加阴影效果。 您可以有多个用逗号分隔的框阴影效果。 首先确保偏移和模糊设置为零，然后将阴影设置为适当的大小。
HTML:
<!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" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2>Box Shadow Property</h2> </div> </body> </html>
CSS 代码：
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
box-shadow:
0 0 0 5px red,
0 0 0 10px green;
}
呈现的页面将如下所示：
使用 background-clip 属性
background-clip 属性决定背景在一个元素中应该延伸多远。 扩展可以在边框框、填充框或内容框上。
HTML 代码：
<!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" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2>Background-Clip Property</h2> </div> </body> </html>
CSS 代码：
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border: 7px solid rgb(36, 85, 7);
padding: 5px;
background-clip: content-box;
background-color: rgb(238, 152, 130);
}
呈现的页面将如下所示：
使用伪元素
由 ::before 和 ::after 选择器表示的伪元素允许 Web 设计人员在不向代码添加标记的情况下设置 HTML 文档部分的样式。
我们可以使用以下代码说明如何使用伪元素创建双边框：
HTML文件
<!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" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2>pseudo property</h2> </div> </body> </html>
CSS
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 150px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
background-color: brown;
}
box{
background-color: rebeccapurple;
position: relative;
border: 8px solid red;
}
.box::before{
content: " ";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border: 8px solid green;
border-width: 6px;
border-color: green white green white;
width: 150px;
height: 100px;
}
呈现的页面将如下所示：
双边框 CSS 的真实示例
双边框 CSS 属性在许多网站中使用。 您必须将双边框属性与其他 CSS 属性结合使用才能发挥最佳效果。 以下是双边框的两个例子；
亚马逊上的“购物车”按钮
亚马逊是电子商务领域最知名的公司之一。 它的购物车按钮有一个双边框 CSS，用于视觉美学并提示用户采取行动。
当用户将鼠标悬停在“购物车”按钮上时，会出现双边框。 当您将鼠标悬停在亚马逊的导航菜单上时，边框也是可见的。
Mailchimp 按钮
Mailchimp 是一种电子邮件营销服务，允许用户创建、启动和跟踪活动。 它的网站在各个部分使用双边框效果。 注册和登录按钮有双边框，以在用户浏览时“营造”一种紧迫感。
当用户将光标移过这些按钮时，这些按钮底部的边框会变粗。
使用双边框 CSS 效果时的最佳实践
使用双 CSS 时很容易忘乎所以。 最终目标是确保用户轻松导航并强调您网站上的主要区域。 遵循这些最佳实践：
- 使用一致的样式：如果您使用双边框，请确保所有元素的样式一致。 例如，双边框可用于导航、号召性用语和注册/登录按钮。 如果可能，请确保具有双边框的元素具有相同的颜色和边距厚度。
- 确保这些双边框适用于不同的设备：我们生活在一个人们通过智能手机、PC 和平板电脑浏览网站的世界。 测试以确保双边框在各种屏幕尺寸上按预期显示。
- 谨慎使用它们：您可能会在第一次发现某个 CSS 效果后过度使用它。 然而，double CSS 适合网页上的各种元素。 仅在为设计增加价值的区域使用此属性。
结论
我们重点介绍了可用于在 CSS 中创建双边框的主要方法。 方法的选择将取决于您希望通过双边框实现什么以及您的偏好。 您可以决定在同一页面上使用一种或几种双边框样式的组合。
您可以查看这些 CSS 资源以详细了解层叠样式表。
