CSS 属性 border-inline 是一个简写属性，它设置不同逻辑内联边框属性的值，并将它们组合成一个语句。
元素的书写模式、方向性和文本方向决定了 border-inline 属性如何映射到实际边界。
根据 writing-mode、direction和text-orientation的值border-inline 的行为类似于 border-top 和 border-bottom 或 border-right 和 border-left 属性。
使用border-block属性，它设置 border-block-start 和 border-block-end，在其他维度建立边框。
属性值
指定border-inline以任意顺序包含以下一项或多项:
<'border -width'>: 边框的宽度。
<'border- style'>: 边框的线条样式。
<color>: 边框的颜色。
组成属性
此属性是以下 CSS 属性的简写:
语法
border-inline = <'border-block-start'> 适用范围
所有 HTML 元素。
CSS border-inline: 基本示例
以下示例演示 CSS border-inline 属性的用法。
<html>
<head>
<style>
.container {
background-color: #ffeeba;
width: 450px;
height: 450px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
border-radius: 10px;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
}
.custom-border {
border-inline: 6px dashed #3498db;
padding: 10px;
font-weight: bold;
color: #333;
}
</style>
</head>
<body>
<div class="container">
<p class="custom-border">带有 border-inline 属性的示例</p>
</div>
</body>
</html> CSS border-inline: 书写模式
以下示例演示了 CSS border-inline 属性在垂直书写模式下的使用。
<html>
<head>
<style>
.container {
background-color: #fed8b1;
width: 400px;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
border-radius: 15px;
box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.6);
writing-mode: vertical-rl;
}
.demo-border {
border:4px solid black;
border-inline: 0.9rem groove #e74c3c;
padding: 10px;
font-weight: bold;
color: #333;
}
</style>
</head>
<body>
<div class="container">
<p class="demo-border">带有垂直文本的边框内嵌示例。</p>
</div>
</body>
</html> 相关属性
下表列出了一些相关属性:
| 属性 | 描述 |
|---|---|
| border-inline-width | 定义元素逻辑内联边框的宽度。 |
| border-inline-start-width | 定义逻辑宽度元素的内联起始边框。 |
| border-inline-end-width | 定义元素的逻辑内联结束边框的宽度。 |
| border-inline-end | 用于设置单个逻辑内联结束边框属性的简写属性 |
| border-inline-color | 定义元素逻辑内联边框的颜色。 |
| border-inline-start-color | 定义元素的逻辑内联起始边框的颜色。 |
| border -inline-end-color | 定义元素的逻辑内联结束边框的颜色。 |
| border-inline-start | 用于设置单个逻辑内联开始边框属性的简写属性。 |
| border-inline-style | 定义内联边框的样式元素的。 |
| border-inline-start-style | 定义元素的逻辑内联起始边框的样式。 |
| border-inline-end-style | 定义元素逻辑内联结束边框的样式。 |