CSS - 边框

HTML 元素的边框只是围绕元素内容和填充的一条或多条线。每个边框都具有三个方面：宽度或厚度；它的风格或外观；和它的颜色。

CSS 边框

CSS边框属性允许您指定表示元素的框的边框的外观。您可以更改边框的三个属性 -

  • border-style - 指定边框是否应为实线、虚线、双线或其他可能的值之一。

  • border-color - 指定边框的颜色。默认值是元素的前景色，如果元素为空白，则为父元素的颜色

  • border-width - 指定边框的宽度。默认值为中等。

现在，我们将通过示例了解如何使用这些属性。

CSS 边框样式

border -style属性指定要显示的边框类型。以下值可以传递给边框样式：

价值 描述
没有任何 无边界
隐 隐藏边框，除表格元素外与“无”相同
点缀的 一系列的点
破折号 一系列短划线
坚硬的 一条实线
双倍的 两条平行线，它们之间有一个小间隙
槽 似乎刻在页面上的边框
岭 边框似乎在页面上方略微凸起
插图 嵌入页面的边框
一开始 边框略微凸起于页面之外

border -style属性在一条语句中最多可以有四个值，我们可以在其中指定上、右、下和左边框的边框样式。

例子

以下示例使用不同的值正确显示边框样式 -

<html>
<body>
   <p style="border-style: none;">No border.</p>
   <p style="border-style: hidden;">Hidden border.</p>
   <p style="border-style: dotted;">Dotted border.</p>
   <p style="border-style: dashed;">Dashed border.</p>
   <p style="border-style: solid;">Solid border.</p>
   <p style="border-style: double;">Double border.</p>
   <p style="border-style: groove;">Groove border.</p>
   <p style="border-style: ridge;">Ridge border.</p>
   <p style="border-style: inset;">Inset border.</p>
   <p style="border-style: outset;">Outset border.</p>
   <p style="border-style: none dashed solid dotted;">A mixed border.</p>
</body>
<html>

CSS 边框样式 - 单面

CSS 提供了以下四个属性来控制元素每个单面的样式。

  • 顶部边框样式
  • 右边框样式
  • 边框底部样式
  • 左边框样式

例子

让我们看一个例子：

<html>
<head>
<style>
   p {
      border-top-style: dotted; border-right-style: solid; 
      border-bottom-style: dashed; border-left-style: double;
      border-width:5px; padding: 2em;
   }
</style>
</head>
<body>
   <h2>border-style (single-side)</h2>
   <p>Different border styles on all the sides.</p>
</body>
<html>

CSS 边框宽度

设置边框样式后，下一个属性是border-width，该属性用于设置边框宽度。以下值可以传递给border-width：

价值 描述
薄的 薄边框
中等的 中等宽度的边框
厚的 厚边框
长度 以 px、pt、cm、em 等指定的任何长度

border-width 属性在一条语句中最多可以有四个值，我们可以在其中指定上、右、下和左边框的边框宽度。

我们应该在声明border-width之前声明border-style，否则将看不到边框效果。

例子

让我们看一个例子：

<html>
<body>
   <h2>border-width with different values</h2>
   <p style="border-style: double; border-width: thin;">Thin width.</p>
   <p style="border-style: dashed; border-width: medium;">Medium width.</p>
   <p style="border-style: solid; border-width: thick;">Thick width.</p>
   <p style="border-style: dotted; border-width: 5px">Specific length width border.</p>
   <p style="border-style: solid; border-width: 2px 4px 5px 10px">Mixed length width border.</p>
</body>
</html>

CSS 边框宽度 - 单边

属性border-width可以为每个单边独立设置。可以将相同的一组值传递给边框宽度的每个单边：

  • 边框顶部宽度
  • 右边框宽度
  • 边框底部宽度
  • 左边框宽度

例子

让我们看一个例子：

<html>
<head>
<style>
   p {
      border-style: solid;  padding: 2em;
      border-top-width: thin; border-right-width: thick; 
      border-bottom-width: medium; border-left-width: 10px;
   }
</style>
</head>
<body>
   <h2>border-width (single-side)</h2>
   <p>Different border styles on all the sides.</p>
</body>
<html>

CSS 边框颜色

border-color属性是border的第三个组成属性。它设置边框的颜色。

  • border-color 属性可以有一个、两个、三个或全部四个值。

  • 如果不声明颜色，则默认颜色是元素的前景色。

  • 可以传递任何类型的颜色值，例如名称、RGB、RGBA、十六进制等。

以下值可以传递给border-color：

价值 描述
颜色 边框将采用指定的颜色
透明的 边框将是透明的
继承 父元素的值被继承

您应该在声明border-color之前声明border-style，否则将看不到边框颜色效果。

border-color 属性在一条语句中最多可以有四个值，我们可以在其中指定上、右、下和左边框的边框颜色。

例子

让我们看一个border-color的例子：

<html>
<body>
   <h2>border-color with different values</h2>
   <p style="border-style: double; border-color: red;">Red Color Border.</p>
   <p style="border-style: dashed; border-color: #40a944;">Green Color Border</p>
   <p style="border-style: solid; border-color: rgb(255,200,0);">Yellow Color Border</p>
   <p style="border-style: dotted; border-color: hsl(0, 50%, 50%)">Brown Color Border</p>
   <p style="border-style: solid; border-color: red blue green yellow">Mixed Color Borders</p>
</body>
</html>

CSS 边框颜色 - 单面

属性border-color可以为每个单面独立设置。可以将相同的一组值传递给border-color的每个单边：

  • 边框顶部颜色
  • 右边框颜色
  • 边框底部颜色
  • 左边框颜色

例子

让我们看一个例子：

<html>
<head>
<style>
   p {
      border-style: solid;  padding: 2em;
      order-top-color: red; border-right-color: #0000ff; 
      border-bottom-color: rgb(100,123,111); border-left-color: rgba(50,123,111,0.4)
   }
</style>
</head>
<body>
   <h2>border-color (single-side)</h2>
   <p>Different border colors on all the sides.</p>
</body>
</html>

CSS Border - 单边速记属性

如果您想仅沿元素的一侧应用所有边框属性，例如样式、宽度和颜色，则可以使用边框简写属性。

例如，如果要将边框属性应用于h2元素的顶部，则可以使用以下语法：

   h2 {border-top: thin solid red;}

基于任何元素每一侧的四个简写属性如下：

  • 边框顶部
  • 右边界
  • 边框底部
  • 左边框

例子

让我们看一个例子：

<html>
<head>
<style>
   p {
      border-top: red dashed thick;
      border-right: solid #0000ff medium;
      border-bottom: 10px double rgb(100,123,111);
      border-left: rgba(50,123,111,0.4) 15px solid;
      padding: 10px;
   }
</style>
</head>
<body>
   <h2>Shorthand single-side border properties</h2>
   <p>Check the borders!!!</p>
</body>
</html>

CSS Border - 全局速记属性

元素所有边的 border 的最小可能简写属性是border。

句法

   h2 {border: thick dotted green;}

上面的代码将在 h2 元素的所有四个边上添加一个绿色的、点状的粗边框。

例子

让我们看一个例子：

<html>
<head>
<style>
   p {
      border: green dashed thick; padding: 10px;
   }
</style>
</head>
<body>
   <h2>Border Shorthand Property</h2>
   <p>Check the borders!!!</p>
</body>
</html>

但是您仍然可以选择使用专门传递的任何单个属性来覆盖边界速记属性。请参阅以下示例代码来阐明这一点：

   h2 {border: thin solid gray;}
   h2 {border-bottom-width: 15px;}

上面的代码除了底部宽度为 15px 外，所有侧面都有一个细实心的灰色边框。

让我们看一个例子：

<html>
<head>
<style>
   p {
      border: #40a944 dashed thick; border-bottom-width: 15px; padding: 10px;
   }
</style>
</head>
<body>
   <h2>Border Shorthand Property</h2>
   <p>Check the borders!!!</p>
</body>
</html>

CSS 圆角边框

我们可以使用border-radius属性为元素添加圆角边框。

句法

   p {
      border: 2px solid #40a944; border-radius: 5px;
   }

上面的代码将在段落元素周围添加圆形边框。

例子

<html>
<head>
<style>
   p {
      border: 2px solid #40a944; border-radius: 5px; padding:10px;
   }
</style>
</head>
<body>
   <h2>Round Borders</h2>
   <p>Check the borders!!!</p>
</body>
</html>

CSS 边框 - 内联元素

可以为任何内联 HTML 元素指定边框。边框的粗细不会对元素的行高产生任何影响。如果在内联元素中指定了左边框和右边框，它将替换边框周围的文本。

句法

strong {border-top: thin solid green; border-bottom: 5px dotted #ff00ff;}

上面的代码将边框应用于段落中的强文本，顶部为绿色细实边框，底部为洋红色 5 像素点状边框。

例子

让我们看一个例子：

<html>
<head>
<style>
   strong {
      border-top: thick solid green; border-bottom: 5px dashed #ff00ff; 
      background-color: silver;
   }
</style>
</head>
<body>
   <div>
      <h2>CSS Borders on Inline Elements</h2>
      <p>Check the <strong>inline elements with borders</strong> and rest has no border.</p>
   </div>
</body>
</html>

CSS 边框 - 替换元素

我们可以在替换元素（例如图像）周围应用边框，但在此类元素上应用边框会影响行高。

句法

   img {
      border: 2em solid #40a944;
   }

上面的代码将在图像周围应用一个 2em 宽的绿色实心边框。

例子

让我们看一个例子：

<html>
<head>
<style>
   img {
      border: 1em solid #40a944;
   }
</style>
</head>
<body>
   <div>
      <p>Check the logo <img src="images/logo.png" alt="logo image"> with borders altering the line height.</p>
   </div>
</body>
</html>