CSS border-inline-end-style - 易学教程，面试笔记经验！

CSS border-inline-end-style 属性确定元素内联结束边框的样式，该样式又映射到元素的物理边框。

该属性是逻辑内联结束边框，这意味着它的值取决于元素的书写模式、方向性和文本方向。

基于 writing-mode、direction和text-orientation的值，内联结束边框对应于border-top-style，border-right-style、border-bottom-style或border-left-style。

属性值

<'border-style'>:显示边框的线条样式。请参阅border-style。

适用范围

所有 HTML 元素。

语法

复制代码复制代码border-inline-end-style = none | hidden | dotted | dashed |solid | double | groove | ridge | inset | outset;

CSS border-inline-end-style: 实心边框样式

下面是一个显示 p 元素内联结束边框的实心边框样式的示例：

复制代码复制代码<html>
<head>
<style>
   div {
      background-color: black;
      width: 220px;
      height: max-content;
      padding: 10px;
   }

   .border-solid {
      border-inline-end-style: solid;
   }

   p {
      padding: 15px;
      color: white;
      border: 5px solid gold;
      margin: 8px;
   }
</style>
</head>
<body>
   <div>
      <p class="border-solid">实线内嵌结束边框</p>
   </div> 
</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

CSS border-inline-end-style: 内嵌边框样式

这里是一个显示 p 元素的内联结束边框的内嵌边框样式示例:

复制代码复制代码<html>
<head>
<style>
   div {
      background-color: black;
      width: 220px;
      height: max-content;
      padding: 10px;
   }

   .border-inset {
      border-inline-end-style: inset;
   }

   p {
      padding: 15px;
      color: white;
      border: 5px solid gold;
      margin: 8px;
   }
</style>
</head>
<body>
   <div>
      <p class="border-inset">内嵌边框样式</p>
   </div> 
</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

CSS border-inline-end-style: 虚线边框样式

下面是一个显示 p 元素内联结束边框的虚线边框样式的示例:

复制代码复制代码<html>
<head>
<style>
   div {
      background-color: black;
      width: 220px;
      height: max-content;
      padding: 10px;
   }

   .border-dashed {
      border-inline-end-style: dashed;
   }

   p {
      padding: 15px;
      color: white;
      border: 5px solid gold;
      margin: 8px;
   }
</style>
</head>
<body>
   <div>
      <p class="border-dashed">虚线边框样式</p>
   </div> 
</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

CSS border-inline-end-style: 点状边框样式

以下是 p 元素内联结束边框的点状边框样式示例:

复制代码复制代码<html>
<head>
<style>
   div {
      background-color: black;
      width: 220px;
      height: max-content;
      padding: 10px;
   }

   .border-dotted {
      border-inline-end-style: dotted;
   }

   p {
      padding: 15px;
      color: white;
      border: 5px solid gold;
      margin: 8px;
   }
</style>
</head>
<body>
   <div>
      <p class="border-dotted">点状边框样式</p>
   </div> 
</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

CSS border- inline-end-style: Groove 边框样式

这里是 p 元素内联结束边框的groove边框样式示例:

复制代码复制代码<html>
<head>
<style>
   div {
      background-color: black;
      width: 220px;
      height: max-content;
      padding: 10px;
   }

   .border-groove {
      border-inline-end-style: groove;
   }

   p {
      padding: 15px;
      color: white;
      border: 5px solid gold;
      margin: 8px;
   }
</style>
</head>
<body>
   <div>
      <p class="border-groove">Groove 边框样式</p>
   </div> 
</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

CSS border-inline-end-style: 双边框样式

下面是 p 元素内联结束边框的双边框样式示例:

复制代码复制代码<html>
<head>
<style>
   div {
      background-color: black;
      width: 220px;
      height: max-content;
      padding: 10px;
   }

   .border-double {
      border-inline-end-style: double;
   }

   p {
      padding: 15px;
      color: white;
      border: 5px solid gold;
      margin: 8px;
   }
</style>
</head>
<body>
   <div>
      <p class="border-double">双边框样式</p>
   </div> 
</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

CSS border-inline-end-style: 起始边框样式

这里是一个显示 p 元素内联结束边框的起始边框样式的示例:

复制代码复制代码<html>
<head>
<style>
   div {
      background-color: black;
      width: 220px;
      height: max-content;
      padding: 10px;
   }

   .border-outset {
      border-inline-end-style: outset;
   }

   p {
      padding: 15px;
      color: white;
      border: 5px solid gold;
      margin: 8px;
   }
</style>
</head>
<body>
   <div>
      <p class="border-outset">outset 边框样式</p>
   </div> 
</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

CSS border-inline-end-style: 山脊边框样式

这里是显示 p 元素内联结束边框的脊线边框样式的示例:

复制代码复制代码<html>
<head>
<style>
   div {
      background-color: black;
      width: 220px;
      height: max-content;
      padding: 10px;
   }

   .border-ridge {
      border-inline-end-style: ridge;
   }

   p {
      padding: 15px;
      color: white;
      border: 5px solid gold;
      margin: 8px;
   }
</style>
</head>
<body>
   <div>
      <p class="border-ridge">ridge 边框样式</p>
   </div> 
</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

CSS border-inline-end-style: 无边框

下面是一个示例，显示 p 元素的内联结束边框没有边框样式：

复制代码复制代码<html>
<head>
<style>
   div {
      background-color: black;
      width: 220px;
      height: max-content;
      padding: 10px;
   }

   .border-none {
      border-inline-end-style: none;
   }

   p {
      padding: 15px;
      color: white;
      border: 5px solid gold;
      margin: 8px;
   }
</style>
</head>
<body>
   <div>
      <p class="border-none">无边框样式</p>
   </div> 
</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

CSS border-inline-end-style: 基于书写模式（水平）

下面是一个示例，显示了基于文本书写模式的 p 元素内联端边框的样式，即水平方向。给出的样式是点状的。您可以使用其他样式值来查看更改。

复制代码复制代码<html>
<head>
<style>
   div {
      background-color: peachpuff;
      width: 220px;
      height: 220px;
   }

   .sampleText-wm-vtl {
      writing-mode: vertical-rl;
      border: 5px solid red;
      border-inline-end-style: double;
   }

   p {
      padding: 5px;
   }
</style>
</head>
<body>
   <div>
      <p class="sampleText-wm-vtl">垂直文本</p>
   </div> 
</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

CSS border-inline-end-style: 基于书写模式（垂直）

下面是一个示例，显示了基于文本书写模式的 p 元素的内联端边框样式，即垂直。给出的样式是双重的。您可以使用其他样式值来查看更改。

复制代码复制代码<html>
<head>
<style>
   div {
      background-color: peachpuff;
      width: 220px;
      height: 220px;
   }

   .sampleText-wm-vtl {
      writing-mode: vertical-rl;
      border: 5px solid red;
      border-inline-end-style: double;
   }

   p {
      padding: 5px;
   }
</style>
</head>
<body>
   <div>
      <p class="sampleText-wm-vtl">垂直文本</p>
   </div> 
</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

CSS border-inline-end-style: 基于方向（从左到右）

下面是一个示例，显示了 p 元素的内联结束边框的样式，该样式基于文本的方向，即从左到右。给出的样式是虚线。您可以使用其他样式值来查看更改。

复制代码复制代码<html>
<head>
<style>
   div {
      background-color: black;
      width: 220px;
      height: 220px;
   }

   .sampleText-dir-ltr {
      direction: ltr;
      border: 8px solid red;
      border-inline-end-style: dashed;
   }

   .sampleText-dir-rtl {
      direction: rtl;
      border: 10px solid gold;
      border-inline-end-style: groove;
   }

   p {
      padding: 15px;
      color: white;
   }
</style>
</head>
<body>
   <div>
      <p class="sampleText-dir-ltr">Direction ltr</p>
      <p class="sampleText-dir-rtl">Direction rtl</p>
   </div> 
</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
32
33

CSS border-inline-end-style: 基于方向（从右到左）

这里是一个示例，显示p 元素内联结束边框的样式基于文本的方向，即从右到左。给出的风格是groove。您可以使用其他样式值来查看更改。

复制代码复制代码<html>
<head>
<style>
   div {
      background-color: black;
      width: 220px;
      height: 220px;
   }

   .sampleText-dir-rtl {
      direction: rtl;
      border: 10px solid gold;
      border-inline-end-style: groove;
   }

   p {
      padding: 15px;
      color: white;
   }
</style>
</head>
<body>
   <div>
      <p class="sampleText-dir-rtl">Direction rtl</p>
   </div> 
</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

CSS border-inline-end-style: 相关属性

以下是与 border-inline-end-style 相关的 CSS 属性列表:

属性	描述
border-block-start-style	设置元素逻辑块起始边框的样式。
border-block-end-style	设置元素逻辑块结束边框的样式。
border-inline-end-style	设置逻辑的样式元素的内联结束边框。