CSS 边框

HTML元素的边框简单地围绕内容和内边距的一个或多个线条。每个边框都有三个方面：它的宽度或厚度，它的样式或外观，以及它的颜色。

CSS边框

CSS的 border 属性允许您指定表示元素的框的边框应该如何显示。有三个边框属性可以更改 –

border-style - 指定边框是否应为实线、虚线、双线或其他可能的值之一。
border-color - 指定边框的颜色。默认值为元素的前景色，如果元素为空，则为父元素的颜色。
border-width - 指定边框的宽度。默认值为medium。

现在，我们将看到如何使用这些属性的示例。

CSS边框样式

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

值	描述
none	无边框
hidden	隐藏边框，除了表格元素之外与’none’相同
dotted	一系列小点
dashes	一系列短划线
solid	单实线
double	两条平行线之间有一个小间隔
groove	看起来像是刻在页面上的边框
ridge	看起来稍微凸起于页面的边框
inset	看起来嵌入在页面中的边框
outset	看起来稍稍凸出于页面的边框

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提供了以下四个属性来控制元素每个单侧的样式。

border-top-style
border-right-style
border-bottom-style
border-left-style

示例

让我们看一个例子：

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

值	描述
thin	一个细边框
medium	一个中等宽度的边框
thick	一个粗边框
length	以像素(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 可以为每个单边单独设置。可以将相同的值集合传递给每个单边的border-width属性：

border-top-width
border-right-width
border-bottom-width
border-left-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 :

数值	描述
color	边框将为指定的颜色
transparent	边框将是透明的
inherit	继承父元素的值

在声明 border-style 之前，你应该先声明 border-color ，否则边框颜色效果将不会显示。

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 :

border-top-color
border-right-color
border-bottom-color
border-left-color

示例

让我们看一个例子:

<html>
<head>
<style>
   p {
      border-style: solid;  padding: 2em;
      border-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边框-单边速记属性

如果你想要应用所有的边框属性，比如 样式，宽度 和颜色，仅仅在一个元素的一边上，你可以使用边框速记属性。

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

h2 {border-top: thin solid red;}

基于任何元素的每一边，有四个速记属性如下：

border-top
border-right
border-bottom
border-left

示例

让我们看个例子：

<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。

语法

h2 {border: thick dotted green;}

上面的代码将在h2元素的四个边缘添加一个绿色、虚线和粗边框。

示例

让我们看一个例子：

<html>
<head>
<style>
   p {
      border: green dashed thick; padding: 10px;
   }
</style>
</head>
<body>
   <h2>边框简写属性</h2>
   <p>检查边框!!!</p>
</body>
</html>

但您仍然可以选择使用单独传递的任何属性来覆盖 border 简写属性。请查看以下示例代码以澄清这一点：

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;}

以上代码将将边框应用于段落中的 强调文本 ，顶部为绿色、细线、实线边框，底部为品红色、5px点线边框。

示例

让我们看一个例子：

<html>
<head>
<style>
   strong {
      border-top: thick solid green; border-bottom: 5px dashed #ff00ff; 
      background-color: silver;
   }
</style>
</head>
<body>
   <div>
      <h2>CSS内联元素的边框</h2>
      <p>检查<strong>带有边框的内联元素</strong>，其余元素没有边框。</p>
   </div>
</body>
</html>

CSS边框 – 替换元素

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

语法

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

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

示例

让我们看一个例子：

<html>
<head>
<style>
   img {
      border: 1em solid #40a944;
   }
</style>
</head>
<body>
   <div>
      <p>检查带有边框的标志<img src="images/logo.png" alt="logo image">并改变行高。</p>
   </div>
</body>
</html>