CSS - border-inline-start 属性

CSS 属性 border-inline-start 是一个简写，允许在样式表中集中设置各种单独的逻辑内联开始边框属性。

元素的书写模式、方向性和文本方向决定了 border-inline-start 属性如何映射到物理边框。
对于为 writing-mode、direction 和 text-orientation 指定的值，它对应于 border-top、border-right、border-bottom 或 border-left 属性。
元素的不同边界由链接到 border-inline-start 的属性 border-block-start、border-block-end 和 border-inline-end 确定。

可能的值

border-inline-start 按任意顺序指定以下一项或多项：

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

成分特性

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

语法


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

适用于

所有 HTML 元素。

CSS border-inline-start - 基本示例

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


<html>
<head>
<style>
	 	.container {
	 	 	 background-color: lightblue;
	 	 	 width: 250px;
	 	 	 height: 250px;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	}
	 	.customText {
	 	 	 border-inline-start: 8px double #e74c3c;
	 	 	 padding: 10px;
	 	 	 margin-left: 10px;
	 	 	 text-align: center;
	 	 	 font-family: 'Arial', sans-serif;
	 	 	 font-size: 16px;
	 	 	 color: #2c3e50;
	 	}
</style>
</head>
<body>
<div class="container">
<p class="customText">An example with css property border-inline-start.</p>
</div>
</body>
</html>

CSS border-inline-start - 写作模式

以下示例演示了 border-inline-start CSS 属性与 veritcal 写入模式的用法。


<html>
<head>
<style>
	 	.custom-container {
	 	 	 background-color: #d6d4d4;
	 	 	 width: 250px;
	 	 	 height: 350px;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	}
	 	.demo-border {
	 	 	 writing-mode: vertical-rl;
	 	 	 border: 2px solid #5e5a5a;
	 	 	 border-inline-start: 1rem solid #3498db;
	 	 	 padding: 12px;
	 	 	 margin: 15px 15px;
	 	 	 text-align: center;
	 	 	 font-family: 'Verdana', sans-serif;
	 	 	 font-size: 20px;
	 	 	 color: #333;
	 	}
</style>
</head>
<body>
<div class="custom-container">
<p class="demo-border">An example with CSS property border-inline-start and veritcal writing-mode</p>
</div>
</body>
</html>

打印本页