如何使用 CSS 指定双边框?

cssweb developmentfront end technology更新于 2025/2/8 2:52:17

我们知道，CSS 是一种基于规则的样式表语言，用于设计和自定义网页。它们用于指定 HTML 元素的格式以及如何在屏幕上显示。我们添加到元素的最常见样式形式之一是添加或修改元素的边框。这可以通过使用 CSS 的"border"属性来实现。

Border 属性

"border"是通过指定边框宽度、样式和颜色来指定元素周围边框的缩写。因此，我们可以说 border 属性实际上由以下三个属性组成。

Border-color− 设置边框颜色，如果未设置则回退为当前颜色。
Border-style − 指定边框样式，如果未设置则回退为无样式。
Border-width − 确定边框厚度，默认值为"medium"。

我们还可以分别指定边框每侧的宽度、样式和颜色。请注意，它不是可继承属性，这意味着，如果容器元素周围有边框，则除非指定，否则子元素将没有边框。

我们可以使用一个、两个或所有三个属性来指定边框。任何我们未指定的值都将以其默认/初始值作为其值。

示例

下面给出了一个使用 border 和所有三个属性的示例。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Border and its styling</title>
   <style>
      div {
         width: 100%;
         height: 200px;
         align-content: center;
         justify-content: center;
      }
      #box1 {
         background-color: antiquewhite;
         border: 2px solid black;
      }
      #box2 {
         background-color: aquamarine;
         border: dashed blue;
      }
      #box3 {
         background-color: blanchedalmond;
         border: red;
      }
      #box4 {
         background-color: beige;
         border: 1px rebeccapurple;
      }
   </style>
</head>
<body>
   <div id="box1">Black 2px solid border</div>
   <div id="box2">Blue dashed border</div>
   <div id="box3">No visible border</div>
   <div id="box4">No visible border</div>
</body>
</html>

我们可以看到，每种样式对元素边框的影响都不同。

指定双边框

现在我们已经了解了在 CSS 中使用 border 属性的基础知识，我们将开始解决"如何使用 CSS 指定双边框"的问题。让我们简要了解一下 border-style 属性是什么，该属性可以做什么，以及如何使用它来解决问题。

指定双边框属性

我们上面已经讨论过，border-style 属性控制 CSS 中应用于元素的边框样式。border-style 属性用于控制边框线在网页上的显示方式。这也是一个简写属性，由 bottom、left、right 和 top 样式属性组成。

我们可以为 border-style 属性 指定一个、两个、三个或全部四个值。

如果我们只使用一个值，则该属性会将相同的样式应用于所有边框线。
当我们使用两个值时，第一个样式会应用于边框的顶部和底部，而第二个样式会应用于边框的左侧和右侧。
当指定三个值时，第一个样式会应用于顶部，第二个样式会同时应用于左侧和右侧，最后一个样式会应用于底部。
如果我们指定所有四个值，则样式的应用顺序将为顶部、右侧、底部和左侧(即从顶部顺时针方向)。

现在让我们看看可以赋予此属性哪些可能的值。

None
Hidden
Dotted
Dashed
Solid
Double
Groove
Ridge
Inset
Outset

研究完每个值后，我们发现，通过使用 border-style 属性的"double"值，可以实现双边框的效果。

示例

下面给出了一个使用 border-style 属性 指定双边框的示例。

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         background-color: beige;
         text-align: center;
      }
      h1.doubleApplied {
         border-width: 5px;
         border-style: double;
         Border-color: blue;
      }
      h1.double2Applied {
         border-width: 15px;
         border-style: double;
         Border-color: blue;
      }
      h1.double3Applied {
         border-width: 20px;
         border-style: double;
         Border-color: blue
      }
   </style>
</head>
<body>
   <h1 class="doubleApplied">This has double styled border with thinnest border</h1>
   <h1 class="double2Applied">This has double styled border applied with slightly thick border than previous box.</h1>
   <h1 class="double3Applied">This has double styled border applied with the thickest border</h1>
</body>
</html>

我们可以看到，通过使用 double 作为值，所有元素周围都带有粗细不同的双边框。

结论

总而言之，使用 CSS 指定双边框非常简单。您只需使用 border-style 属性并将其设置为 double 即可。这将在元素的每一侧绘制两条线，为您的页面带来独特而时尚的外观。此外，您还可以使用其他属性(例如"border-width"和"border-color")自定义这些边框的颜色、大小和其他属性。通过练习，您很快就能创作出令人惊叹的边框设计。