CSS - border-inline-end 属性

border-inline-end 是一个 CSS shortand 属性，用作在样式表中集中定义多个不同的逻辑内联-结束边框属性的快捷方式。

元素的书写模式、方向和文本方向会影响 border-inline-end 属性如何映射到实际边框。
它根据提供的书写模式、方向和文本方向值与 border-left、border-top、border-right 或 border-bottom 属性对齐。
相对于 border-inline-end，属性 border-block-start、border-block-end 和 border-inline-start 一起定义元素的所有边框。

可能的值

border-inline-end 使用以下一个或多个值指定：

<border-width> - 边框的宽度。
<border-style> - 边框的线条样式。
<color> - 边框的颜色。

成分特性

此属性是以下 CSS 属性的简写：

语法


border-inline-end = <line-width> || <line-style> || <color>

适用于

所有 HTML 元素。

CSS border-inline-end - 基本示例

以下示例演示了 border-inline-end 属性的用法。


<html>
<head>
<style>
	 	.container {
	 	 	 background-color: lightgray;
	 	 	 width: 300px;
	 	 	 height: 200px;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	 	 border: 3px solid #e74c3c;
	 	 	 border-radius: 10px;
	 	}
	 	.custom-border {
	 	 	 margin-right: 25px;
	 	 	 text-align: center;
	 	 	 font-family: 'Verdana', sans-serif;
	 	 	 font-size: 20px;
	 	 	 color: #2c3e50;
	 	 	 border-inline-end: 6px double #3498db;
	 	}
</style>
</head>
<body>
<div class="container">
<p class="custom-border">A simple example with border-inline-end.</p>
</div>
</body>
</html>

CSS border-inline-end - 写作模式。

以下示例演示了具有垂直书写模式的 border-inline-end proeprty。


<html>
<head>
<style>
	 	.container {
	 	 	 background-color: #f0f0f0;
	 	 	 width: 300px;
	 	 	 height: 300px;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	 	 border: 4px solid #3498db;
	 	 	 border-radius: 12px;
	 	}
	 	.custom-border {
	 	 	 writing-mode: vertical-rl;
	 	 	 margin-bottom: 10px;
	 	 	 text-align: center;
	 	 	 font-family: 'Helvetica', sans-serif;
	 	 	 font-size: 18px;
	 	 	 color: #333;
	 	 	 border-inline-end: 1rem solid #e74c3c;
	 	}
</style>
</head>
<body>
<div class="container">
<p class="custom-border">An example of border-inline-end with writing-mode: vertical-rl;</p>
</div>
</body>
</html>

打印本页