CSS 边框 - 易学教程，面试笔记经验！

在设计和样式方面，边框是指围绕对象内容的装饰或功能元素，例如文本框、图像或网页上的任何其他 HTML 元素。

border 属性用于在元素（例如 div、图像或文本）周围创建边框。它允许您自定义边框的外观，包括颜色、宽度和样式。

边框在网页的整体美观和设计中起着至关重要的作用。

边框重要性

在CSS中使用边框的重要性可以总结如下：

视觉分隔：边框有助于在视觉上分隔不同的元素在网页上，使用户更容易理解布局和导航。
组织和结构：可以为网格、表格甚至框赋予边框，使内容看起来更美观更有组织性和结构性。
强调和焦点：可以为元素添加边框以强调和突出它们。
设计美观：边框允许您为元素添加装饰，以增强视觉吸引力。这可以通过边框的样式、颜色和宽度来实现。

边框：属性

下表描述了边框的各种属性，它们的说明以及它们保存的默认值：

属性	描述	默认值
style	指定边框是实线、虚线、双线还是其他可能值之一	none
wdth	指定边框的宽度	medium
color	指定颜色边框的颜色	元素的前景色，如果元素为空白，则父元素的颜色

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

CSS 边框：border-style属性

border-style属性是边框的基本属性之一。可以将以下值传递给 border-style：

值	描述
none	无边框
hidden	隐藏边框，除了表格元素外与“无”相同
dotted	一系列点
dashes	一系列短破折号
solid	单实线
double	两条平行线，之间有一个小间隙
groove	似乎雕刻在页面中的边框
ridge	似乎在页面上方稍微凸起的边框
ridge	嵌入到页面中的边框
outset	从页面稍微凸起的边框
initial	设置border-style 属性为其默认值
inherit	继承父元素的 border-style 属性

让我们看一下这些 border-style 值的示例：

复制代码复制代码<html>
<head>
<style>
      p.none {border-style: none;}
      p.hidden {border-style: hidden;}
      p.dotted {border-style: dotted;}
      p.dashes {border-style: dashed;}
      p.solid {border-style: solid;}
      p.double {border-style: double;}
      p.groove {border-style: groove;}
      p.ridge {border-style: ridge;}
      p.inset {border-style: inset;}
      p.outset {border-style: outset;}
      p.mixed {border-style: none dashed solid dotted;}
</style>
</head>
<body>
           <h2>边框样式属性</h2>
       <p class="none">无边框。</p>
       <p class="hidden">隐藏边框。</p>
       <p class="dotted">虚线边框。</p>
       <p class="dashes">虚线边框。</p>
       <p class="solid">实线边框。</p>
       <p class="double">双边框。</p>
       <p class="groove">凹槽边框。</p>
       <p class="ridge">山脊边框。</p>
       <p class="inset">inset边框。</p>
       <p class="outset">outset边框。</p>
       <p class="mixed">混合边框。</p>

</body>
<html>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

单面：边框样式

可以为每个单面专门指定属性 border-style。可以将相同的一组值传递给 border-style 的每个单边：

让我们看一个例子：

复制代码复制代码 <html>
<head>
<style>
   p {border-top-style: dotted; border-right-style: solid; border-bottom-style: dashed; border-left-style: double;
      padding: 2em;}
</style>
</head>
<body>
   <h2>border-style (单边)</h2>
      <p>四面有不同的边框样式。</p>
</body>
<html>1
2
3
4
5
6
7
8
9
10
11

CSS 边框: width 属性

设置边框样式后，下一个属性是 border-width 属性。以下值可以传递给 border-width:

值	描述
thin	细边框
medium	中等宽度边框
thick	粗边框
length	指定的任何长度（例如0.1em，5px）

声明一个border-style 在声明border-width之前，否则看不到边框效果。

让我们看一个示例（指定或不指定边框样式）：

复制代码复制代码<html>
  <head>
   <style>
      p.thin {border-width: thin;}
      p.medium {border-width: medium;}
      p.thick {border-width: thick;}
      p.length {border-width: 100px;}
      p.thin1 {border-style: double; border-width: thin;}
      p.medium1 {border-style: dashed; border-width: medium;}
      p.thick1 {border-style: solid; border-width: thick;}
      p.length1 {border-style: dotted; border-width: 10px;}
   </style>
  </head>
  <body>
          <h2>没有<i>border-style</i>属性的边框宽度</h2>
       <p class="thin">细边框。</p>
       <p class="medium">中边框。</p>
       <p class="thick">粗边框。</p>
       <p class="length">特定长度边框。</p>
       <h2>边框宽度与<i>边框样式</i>属性</h2>
       <p class="thin1">细宽度。</p>
       <p class="medium1">中等宽度。</p>
       <p class="thick1">粗宽度。</p>
       <p class="length1">特定长度宽度边框。</p>
  </body>
</html>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

单面：边框宽度

可以为每个单面专门指定属性border-width。可以将相同的一组值传递给 border-width 的每个单边：

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

让我们看一个例子：

复制代码复制代码<html>
<head>
<style>
   p {border-style: solid;
      border-top-width: thin;
      border-right-width: thick;
      border-bottom-width: medium;
      border-left-width: 10px;
      padding: 2em;}
</style>
</head>
<body>
   <h2>border-width (single-side)</h2>
      <p>各边的边框宽度不同。</p>
</body>
</html>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

CSS 边框：颜色属性

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

边框可以有一个、两个、三个或全部四个值。
如果未指定边框颜色，则默认值为 currentcolor，即前景色。
可以传递任何类型的颜色值，例如RGB、RGBA、十六进制等。

可以将以下值传递给边框：

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

声明一个border-style 在声明 border-color 之前，否则看不到边框效果。

让我们看看一个示例（有或没有指定边框样式）：

复制代码复制代码<html>
<head>
<style>
   p.color1 {border-color: red;}
   p.hexa1 {border-color: #00ff00;}
   p.color2 {border-style: dashed; border-color: red;}
   p.hexa2 {border-style: solid; border-color: #00ff00;}
</style>
</head>
<body>
      <h2>没有<i>border-style</i>属性的边框颜色</h2>
    <p class="color1">带有名称的红色。</p>
    <p class="hexa1">十六进制的绿色。</p>
    <h2>边框颜色与<i>边框样式</i>属性</h2>
    <p class="color2">带有名称的红色。</p>
    <p class="hexa2">十六进制的绿色。</p>
</body>
</html>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

单面：边框颜色

可以为每个单面专门指定属性border-color。可以将相同的一组值传递给 border-color 的每个单边：

让我们看一个例子：

复制代码复制代码<html>
<head>
<style>
   p {border-style: solid;
      border-top-color: red;
      border-right-color: #0000ff;
      border-bottom-color: rgb(100,123,111);
      border-left-color: rgba(50,123,111,0.4);
      padding: 0.5in;}
</style>
</head>
<body>
      <h2>四面不同的边框颜色</h2>
    <p>检查边框颜色！</p>
</body>
</html>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

CSS 边框：单边简写属性

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

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

复制代码复制代码 h2 {border-top: thin solid red;}

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

让我们看一个例子：

复制代码复制代码 <html>
   <head>
      <style>
         p {border-top: red dashed thick;
            border-right: solid #0000ff medium;
            border-bottom: thin double rgb(100,123,111);
            border-left: rgba(50,123,111,0.4) 15px solid;
            padding: 2cm;}
      </style>
   </head>
   <body>
           <h2>简写单边边框属性</h2>
       <p>检查边界</p>

   </body>
</html>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

CSS 边框：全局：简写属性

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

语法

复制代码复制代码h2 {border: thick dotted green;}

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

让我们看一个例子：

复制代码复制代码 <html>
<head>
<style>
   p {border: green dashed thick;
      padding: 2cm;}
</style>
</head>
<body>
   <h2>border 属性简写</h2>
   <p>检查边框</p>
</body>
</html>1
2
3
4
5
6
7
8
9
10
11

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

复制代码复制代码 h2 {border: thin solid gray;}
   h2 {border-bottom-width: 15px;}1

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

让我们看一个示例：

复制代码复制代码 <html>
<head>
<style>
   p {border: #0000ff dashed thick;
      border-bottom-width: 15px;
      padding: 2cm;}
</style>
</head>
<body>
   <h2>border 属性简写</h2>
   <p>检查边框</p>
</body>
</html>1
2
3
4
5
6
7
8
9
10
11
12

CSS 边框：边框和内联元素

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

语法

复制代码复制代码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>
     <p>检查<strong>带边框的内联元素</strong>，其余元素没有边框。</p>
   </div>
</body>
</html>1
2
3
4
5
6
7
8
9
10
11
12
13

CSS 边框：替换元素

如果替换元素（例如图像），行高将因应用边框而受到影响。

语法

复制代码复制代码img {border: 2emsolid #ff00ff;}

上面的代码将在图像周围应用一个纯洋红色、2em 宽的边框。

让我们看一个示例：

复制代码复制代码 <html>
<head>
<style>
   img {border: 1em solid #ff00ff;}
</style>
</head>
<body>
   <div>
      <p>检查log <img src="/css/images/logo.png" alt="logo image"> ，其边框会改变行高。</p>
   </div>
</body>
</html>1
2
3
4
5
6
7
8
9
10
11

CSS 边框：图像

为了使边框更加复杂和有趣，可以将图像作为边框添加到元素中。为此，您需要使用属性 border-image-source 提供图像源。

要记住的要点：

在提供图像源之前声明border-style，否则不会将图像显示为边框。
如果没有指定border-width，则默认为medium，大约为3px。

border-image-source

此属性指定要作为边框传递给元素的图像源。

语法

复制代码复制代码border: 10px solid; border-image-source: url('URL');

border-image-slice

使用属性border-image-source指定的图像可以使用属性border-image-slice进行切片。

顾名思义，该属性用于对图像进行切片。它将图像分为9个区域，其中有4个角，4个边和一个中间区域。

下图演示了border-image-slice属性：

注意：border-image-slice 可以以百分比和长度单位的形式提供。但是，强烈建议使用百分比。

请参阅以下语法示例：

复制代码复制代码 border: 20px solid;
   border-image-source: url('URL');
   border-image-slice: 25%;1
2

border-image-width

要指定要设置为边框的图像的宽度，可以使用属性 border-image-width。

语法

复制代码复制代码 border: 20px solid;
   border-image-source: url('URL');
   border-image-width: 15px;
   border-image-slice: 33.33%;1
2
3

border-image-outset

为了避免图片边框与内容重叠，可以使用属性border-image-outset .

此属性将边框图像推到边框之外。

语法

复制代码复制代码 border: 20px solid;
   padding: 1em;
   border-image-source: url('URL');
   border-image-width: 1;
   border-image-slice: 10;
   border-image-outset: 8px;1
2
3
4
5

border-image-repeat

默认情况下，边框图像沿两侧拉伸，但可以使用属性 border-image-repeat 更改此设置重复。

此属性重复沿边框两侧指定的图像，直到整个长度和宽度没有被填满。

语法

复制代码复制代码 border: 20px solid;
   padding: 1em;
   border-image-source: url('URL');
   border-image-repeat: repeat;1
2
3

除了stretch和repeat之外，它还可以将值取为round。

CSS 边框图像：简写

为了简洁起见，有一个设置边框的简写图像，即border-image。传递给简写 border-image 的值使用斜线符号 (/) 分隔。这些值应按特定顺序列出，即切片，然后是宽度，最后是偏移量。

语法

复制代码复制代码 border-image: url('URL'), 40% 25% 20% fill / 12px 5px / 5px space;

注意：您还可以声明属性 border-image 仅包含一个值，即 URL，其余值将采用默认值。

让我们看一个例子：

复制代码复制代码 <html>
<head>
<style>
   .box {
      width: 200px;
      height: 200px;
      border: 20px solid;
      border-image: url(/css/images/border.png) 30 round;
   }
</style>
</head>
<body>
   <div class="box"></div>
</body>
</html>1
2
3
4
5
6
7
8
9
10
11
12
13
14

CSS边框：相关属性

下表列出了所有与边框相关的属性：

属性	说明
border	一种简写属性，用于在一个声明中设置所有边框属性
border-bottom	用于设置元素下边框的简写属性。
border-bottom-color	设置元素下边框的颜色.
border-bottom-width	设置下边框的宽度
border-bottom-style	设置元素的下边框样式
border-color	用于设置边框颜色的简写属性
border-left	用于设置左边框的简写属性
border-left-color	设置左边框的颜色
border-left-width	设置左侧的宽度元素的边框。
border-left-style	设置元素的样式元素的左边框。
border-right	用于设置的简写属性元素的右边框。
border-right-color	设置颜色元素右边框的宽度。
border-right-width	设置元素右边框的宽度。
border-right-style	设置元素右边框的样式。
border-style	简写设置元素边框样式的属性
border-top	简写用于设置元素上边框的属性。
border-top-color	设置元素上边框的颜色。
border-top-width	设置元素上边框的宽度。
border-top-style	设置元素上边框的样式。
border-width	用于设置元素边框宽度的简写属性。
border-image	用于设置边框图像的简写属性。
border-image-outset	设置图像起始位置，即边框图像区域超出边框框的距离。
border-image-repeat	此属性确定边框图像是否应重复、圆角、间隔或拉伸。
border-image-source	设置要作为元素边框传递的图像的源/路径。
border-image-slice	此属性显示如何在边框中分割图像。
border-image-width	设置要设置为边框的图像的宽度。