CSS 属性 border-inline-start 是一种简写，允许在样式表中集中设置各种单独的逻辑 inline-start 边框属性。
元素的书写模式、方向性和文本方向决定了 border-inline-start 属性如何映射到物理边框。
相对于指定的值writing-mode、direction和text-orientation，它对应于border-top，border-bottom或border-left 属性。
元素的不同边框由属性border-block-start，border-block-end 和 border-inline-end 链接到 border-inline-start。
属性值
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">带有 css 属性 border-inline-start 的示例。</p>
</div>
</body>
</html> CSS border-inline-start: 书写模式。
以下示例演示了 border-inline-start CSS 属性的用法:垂直书写模式。
<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">CSS 属性 border-inline-start 和垂直书写模式的示例</p>
</div>
</body>
</html>