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

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 - 基本示例

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

<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">A Example with border-inline property</p>
</div>
</body>
</html>

CSS border-inline - 写作模式

以下示例演示了在垂直写入模式下使用 border-inline CSS 属性。

<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">A border-inline example with vertical text.</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	定义元素的逻辑内联结束边框的样式。

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