CSS - border-inline-end-style 属性_CSS 菜鸟教程

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

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

根据 writing-mode、direction 和 text-orientation 的值，内联结束边框对应于 border-top-style、border-right-style、border-bottom-style 或 border-left-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">solid inline end border</p>
	 	</div>	
</body>
</html>

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">inset inline end border</p>
	 	</div>	
</body>
</html>

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">dashed inline end border</p>
	 	</div>	
</body>
</html>

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">dotted inline end border</p>
	 	</div>	
</body>
</html>

CSS border-inline-end-style - 凹槽边框样式

以下示例显示了 p 元素的内联结束边框的凹槽边框样式：

<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 inline end border</p>
	 	</div>	
</body>
</html>

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">double inline end border</p>
	 	</div>	
</body>
</html>

CSS border-inline-end-style - Outset 边框样式

以下示例显示了 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 inline end border</p>
	 	</div>	
</body>
</html>

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 inline end border</p>
	 	</div>	
</body>
</html>

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">No inline end border</p>
	 	</div>	
</body>
</html>

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">Vertical Text</p>
	 	</div>	
</body>
</html>

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">Vertical Text</p>
	 	</div>	
</body>
</html>

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>

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

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

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

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

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

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

<< CSS - border-inline-end-color 属性 CSS - border-inline-end-width 属性 >>