在CSS中创建双边框的6种方法

边框在网页设计/开发中非常重要，它们可以吸引用户的注意力或将网页中的内容分开。当您希望HTML元素上的所有四个边框都相同时，可以使用边框简写。

另一方面，您还可以使用边框颜色、边框样式和边框宽度的长属性使每个边框都不同/独特。当您想要指定边框的颜色时，可以使用边框颜色，使用边框宽度确定边框的宽度，并使用边框样式属性指定边框是虚线、双线还是实线。

您还可以使用诸如边界块起始和顶部边框之类的属性针对单独的边框进行定位。

双重边框是指两条平行线围绕HTML元素。这两条线由一个间隙分隔，该间隙可以保持透明，也可以用图像或背景颜色填充。

例如，我们可以在一个双重边框中放置一个注册/登录按钮。

为什么使用双重边框？

• 分离：您可以使用双重边框通过分隔不同的HTML元素来提高网页的可读性和可扫描性。例如，您可以使用双重边框来分隔网页上的标题、正文和页脚等元素。
• 视觉吸引力：您可以在双重边框上使用不同/对比的颜色，使不同的元素更具视觉吸引力。
• 显示层次结构：使用双重边框可以清楚地区分网页上的重要和不重要的元素。
• 便于定制：使用双重边框可以创建个性化和独特的设计。例如，您可以更改每条线的颜色或宽度。
• 强调：使用双重边框属性，您可以突出显示网页上的特定链接或按钮。

您可以使用以下方式在CSS中创建双重边框。

使用border-style属性

border-style属性设置元素的四个边框的样式。在这种情况下，我们使用double关键字来设置样式。当我们使用double关键字时，两个边框之间会创建自动填充。

为了演示目的，我们将边框宽度设置为15px。我们还将选择红色作为边框颜色，并指定边框样式为double。

HTML代码：

  

    

    

    

    

      

  

  

       
 Border Property
  

  

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来标记渐变线的起点。如果未指定顺序，则默认值为to bottom。

下面的代码给我们的盒子设置了7px的边框宽度。然后我们可以在盒子的背景属性上指定线性渐变。

HTML代码：

  

    

    

    

    

      

  

  

       
linear-gradient() function
 

  

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属性

outline是在元素的边框外绘制的线条。这可以实现双边框效果，我们可以使用一个outline和一个单一的边框。我们必须使用outline-offset在边框和outline属性之间添加间距。

HTML代码：

  

    

    

    

    

      

  

  

       
Outline Property
 

  

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属性在元素的边框周围添加阴影效果。您可以通过逗号分隔多个box-shadow效果。首先确保偏移和模糊设置为零，然后将阴影设置为正确的大小。

HTML：

  

    

    

    

    

      

  

  

       
Box Shadow Property
 

  

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代码：

  

    

    

    

    

      

  

  

       
Background-Clip 属性
  

  

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选择器表示，允许网页设计师在不添加标记的情况下样式化HTML文档的部分。

我们可以通过以下代码说明如何使用伪元素创建双重边框：

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属性结合使用，以发挥最佳效果。以下是双重边框的两个实例：

亚马逊的“购物车”按钮

Amazon是电子商务领域中的重要品牌之一。它的购物车按钮使用双重边框CSS进行视觉美观，并促使用户采取行动。

当用户将鼠标悬停在“购物车”按钮上时，双重边框会出现。当您将鼠标悬停在亚马逊的导航菜单上时，边框也是可见的。

Mailchimp按钮

Mailchimp 是一种电子邮件营销服务，允许用户创建、启动和跟踪活动。其网站在各个部分上使用了双边框效果。注册和登录按钮具有双边框，以在用户浏览时“创造”紧迫感。

用户将光标通过这些按钮时，底部边框会变粗。

使用双边框 CSS 效果的最佳实践

在使用双边框 CSS 时很容易过度使用。最终目标是确保用户能够轻松导航并强调您网站上的主要区域。遵循以下最佳实践：

• 使用一致的样式：如果使用双边框，请确保在所有元素上样式一致。例如，可以在导航、呼叫到动作和注册/登录按钮上使用双边框。如果可能，确保具有双边框的元素具有相同的颜色和边距粗细。
• 确保这些双边框在不同设备上正常工作：我们生活在一个从智能手机、个人电脑和平板电脑浏览网站的世界。请测试以确保双边框在各种屏幕尺寸上正常显示。
• 谨慎使用：在发现某种 CSS 效果后，您可能会被诱惑过度使用。然而，双边框 CSS 适用于网页上的各种元素。只在它对设计有价值的区域使用此属性。

结论

我们已经介绍了您可以使用的主要方法来创建 CSS 中的双边框。选择的方法将取决于您对双边框的目标和偏好。您可以决定在同一页上坚持使用一个或多个双边框样式的组合。

您可以查看这些 CSS resources 以详细了解层叠样式表。