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

CSS border-inline-width 属性确定元素的逻辑内联边框的宽度，然后根据元素的书写模式、方向性和文本方向将其转换为物理边框宽度。

为 writing-mode、direction 和 text-orientation 设置的值定义其行为，对应于 border-left-width 和 border-right-width，或者 border-top-width 和 border-bottom-width 属性。
使用 border-block-width 属性，配置 border-block-start-width 和 border-block-end-width，以指定垂直维度中的边框宽度。

可能的值

<'border-width'> - 边框的宽度。

语法

border-inline-width = <'border-top-width'>{1,2}

适用于

所有 HTML 元素。

CSS border-inline-width - 长度值

以下示例演示了 border-inline-width 和长度值的用法。

<html>
<head>
<style>
	 	.container {
	 	 	 background-color: lightgreen;
	 	 	 width: 350px;
	 	 	 height: 350px;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	 	 border: 2px dotted #3498db;
	 	 	 border-radius: 8px;
	 	}
	 	.demo-border {
	 	 	 border: 1px solid #e74c3c;
	 	 	 border-inline-width: 8px 15px;
	 	 	 padding: 10px;
	 	 	 text-align: center;
	 	 	 font-family: 'Arial', sans-serif;
	 	 	 font-size: 20px;
	 	 	 color: #333;
	 	}
</style>
</head>
<body>
<div class="container">
<p class="demo-border">A example with border-inline-width.</p>
</div>
</body>
</html>

CSS border-inline-width - 瘦值

以下示例演示了 border-inline-width 和 thin width value 的用法。

<html>
<head>
<style>
	 	.container {
	 	 	 background-color: #e6cacd;
	 	 	 width: 350px;
	 	 	 height: 350px;
	 	 	 align-items: center;
	 	 	 display: flex;
	 	 	 justify-content: center;
	 	 	 border-radius: 8px;
	 	}
	 	.demo-border {
	 	 	 border: 5px solid #e74c3c;
	 	 	 border-inline-width: thin;
	 	 	 border-inline-color: black;
	 	 	 padding: 10px;
	 	 	 margin: 15px;
	 	 	 text-align: center;
	 	 	 font-family: 'Arial', sans-serif;
	 	 	 font-size: 20px;
	 	 	 color: #333;
	 	}
</style>
</head>
<body>
<div class="container">
<p class="demo-border">A example with border-inline-width property with thin value.</p>
</div>
</body>
</html>

CSS border-inline-width - 中等值

以下示例演示了 border-inline-width 以及 medium width value 的用法。

<html>
<head>
<style>
	 	.container {
	 	 	 background-color: #e8e1e2;
	 	 	 width: 350px;
	 	 	 height: 350px;
	 	 	 align-items: center;
	 	 	 display: flex;
	 	 	 justify-content: center;
	 	 	 border-radius: 8px;
	 	}
	 	.demo-border {
	 	 	 border: 5px solid gray;
	 	 	 border-inline-width: medium;
	 	 	 border-inline-color: red;
	 	 	 padding: 10px;
	 	 	 margin: 15px;
	 	 	 text-align: center;
	 	 	 font-family: 'Arial', sans-serif;
	 	 	 font-size: 18px;
	 	 	 color: #333;
	 	}
</style>
</head>
<body>
<div class="container">
<p class="demo-border">A example with border-inline-width property with medium value.</p>
</div>
</body>
</html>

CSS border-inline-width - 厚值

以下示例演示了 border-inline-width 和 thick width value 的用法。

<html>
<head>
<style>
	 	.container {
	 	 	 background-color: #fcf7f8;
	 	 	 width: 350px;
	 	 	 height: 350px;
	 	 	 align-items: center;
	 	 	 display: flex;
	 	 	 justify-content: center;
	 	 	 border-radius: 8px;
	 	}
	 	.demo-border {
	 	 	 border: 3px solid gray;
	 	 	 border-inline-width: thick;
	 	 	 border-inline-color: red;
	 	 	 padding: 10px;
	 	 	 margin: 15px;
	 	 	 text-align: center;
	 	 	 font-family: 'Arial', sans-serif;
	 	 	 font-size: 20px;
	 	 	 color: #333;
	 	}
</style>
</head>
<body>
<div class="container">
<p class="demo-border">A example with border-inline-width property with thick value.</p>
</div>
</body>
</html>

CSS border-inline-width - 书写模式

以下示例演示了 border-inline-width 属性以及长度值和垂直写入模式的用法。

	
<html>
<head>
<style>
	 	.custom-container {
	 	 	 background-color: #f9f9f9;
	 	 	 width: 350px;
	 	 	 height: 350px;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	 	 border: 4px dashed #27ae60;
	 	 	 border-radius: 10px;
	 	}
	 	.custom-border {
	 	 	 writing-mode: vertical-rl;
	 	 	 border: 2px solid #e67e22;
	 	 	 border-inline-width: 10px;
	 	 	 padding: 15px;
	 	 	 text-align: center;
	 	 	 font-family: 'Verdana', sans-serif;
	 	 	 font-size: 20px;
	 	 	 color: #333;
	 	}
</style>
</head>
<body>
<div class="custom-container">
<p class="custom-border">An example with property border-inline-width.</p>
</div>
</body>
</html>

<< CSS - border-inline-style 属性 CSS - border-left 属性 >>