CSS - border-block-style 属性

CSS 属性 border-block-style 确定逻辑块边界;元素的书写模式、方向性和文本方向决定了边框的物理表示方式。

根据 writing-mode、direction 和 text-orientation 的给定值，其映射对应于 border-top-style 和 border-bottom-style，或者 border-left-style 和 border-right-style 属性。
border-inline-style 属性可用于在垂直维度中设置边框样式。可以使用它设置 border-inline-start-style 和 border-inline-end-style 的值。

可能的值

<border-style> - 边框的线条样式。

语法


border-block-style = <'border-top-style'>{1,2}

适用于

所有 HTML 元素。

CSS border-block-style - none 值

以下示例演示了 border-block-style 属性和 none style value 的用法。


<html>
<head>
<style>
	 	div {
	 	 	 background-color: #f0f0f0;
	 	 	 width: 350px;
	 	 	 height: 350px;
	 	 	 margin: 50px;
	 	 	 padding: 15px;
	 	}
	 	.border-demo {
	 	 	 font-size: 20px;
	 	 	 color: #333;
	 	 	 padding: 20px;
	 	 	 margin: 10px;
	 	 	 border-block-style: none;
}
</style>
</head>
<body>
<div>
<p class="border-demo">This is an example with border-block-style property with none value.</p>
</div>
</body>
</html>

CSS border-block-style - 隐藏值

以下示例演示了 border-block-style 属性和 hidden style value 的用法。


<html>
<head>
<style>
	 	div {
	 	 	 background-color: #ccf0c5;
	 	 	 width: 350px;
	 	 	 height: 350px;
	 	 	 margin: 50px;
	 	 	 padding: 15px;
	 	}
	 	.border-demo {
	 	 	 font-size: 20px;
	 	 	 color: #333;
	 	 	 padding: 20px;
	 	 	 margin: 10px;
	 	 	 border-block-style: hidden;
}
</style>
</head>
<body>
<div>
<p class="border-demo">This is an example with border-block-style property and hidden style.</p>
</div>
</body>
</html>

CSS border-block-style - 虚线样式

以下示例演示了 border-block-style 属性和虚线样式值的用法。


<html>
<head>
<style>
	 	div {
	 	 	 background-color: #e3e8b0;
	 	 	 width: 350px;
	 	 	 height: 350px;
	 	 	 margin: 50px;
	 	 	 padding: 15px;
	 	}
	 	.border-demo {
	 	 	 font-size: 20px;
	 	 	 color: #333;
	 	 	 padding: 20px;
	 	 	 margin: 10px;
	 	 	 border-block-style: dashed;
	 	 	 border-block-width: 5px;
}
</style>
</head>
<body>
<div>
<p class="border-demo">This is an example with border-block-style property and dashed style.</p>
</div>
</body>
</html>

CSS border-block-style - 纯色样式

以下示例演示了 border-block-style 属性和 solid style value 的用法。


<html>
<head>
<style>
	 	div {
	 	 	 background-color: #e8d1b0;
	 	 	 width: 350px;
	 	 	 height: 350px;
	 	 	 margin: 50px;
	 	 	 padding: 15px;
	 	}
	 	.border-demo {
	 	 	 font-size: 20px;
	 	 	 color: #333;
	 	 	 padding: 20px;
	 	 	 margin: 10px;
	 	 	 border-block-style: solid;
	 	 	 border-block-width: 5px;
	 	 	 border-block-color: #de880d;
}
</style>
</head>
<body>
<div>
<p class="border-demo">This is an example with border-block-style property and solid style.</p>
</div>
</body>
</html>

CSS border-block-style - 双重样式

以下示例演示了 border-block-style 属性和 double style value 的用法。


<html>
<head>
<style>
	 	div {
	 	 	 background-color: #e8d1b0;
	 	 	 width: 350px;
	 	 	 height: 350px;
	 	 	 margin: 50px;
	 	 	 padding: 15px;
	 	}
	 	.border-demo {
	 	 	 font-size: 20px;
	 	 	 color: #333;
	 	 	 padding: 20px;
	 	 	 margin: 10px;
	 	 	 border-block-style: double;
	 	 	 border-block-width: 8px;
	 	 	 border-block-color: #de880d;
}
</style>
</head>
<body>
<div>
<p class="border-demo">This is an example with border-block-style property and double style.</p>
</div>
</body>
</html>

CSS border-block-style - 凹槽样式

以下示例演示了 border-block-style 属性和 groove style value 的用法。


<html>
<head>
<style>
	 	div {
	 	 	 background-color: #ebf0aa;
	 	 	 width: 350px;
	 	 	 height: 350px;
	 	 	 margin: 50px;
	 	 	 padding: 15px;
	 	}
	 	.border-demo {
	 	 	 font-size: 20px;
	 	 	 color: #333;
	 	 	 padding: 20px;
	 	 	 margin: 10px;
	 	 	 border-block-style: groove;
	 	 	 border-block-width: 8px;
	 	 	 border-block-color: #b0bd06;
}
</style>
</head>
<body>
<div>
<p class="border-demo">This is an example with border-block-style property and groove style.</p>
</div>
</body>
</html>

CSS border-block-style - 山脊样式

以下示例演示了 border-block-style 属性和 ridge style value 的用法。


<html>
<head>
<style>
	 	div {
	 	 	 background-color: #ebf0aa;
	 	 	 width: 350px;
	 	 	 height: 350px;
	 	 	 margin: 50px;
	 	 	 padding: 15px;
	 	}
	 	.border-demo {
	 	 	 font-size: 20px;
	 	 	 color: #333;
	 	 	 padding: 20px;
	 	 	 margin: 10px;
	 	 	 border-block-style: ridge;
	 	 	 border-block-width: 10px;
	 	 	 border-block-color: #b0bd06;
}
</style>
</head>
<body>
<div>
<p class="border-demo">This is a border-block-style property example and ridge style.</p>
</div>
</body>
</html>

CSS border-block-style - 插入样式

以下示例演示了 border-block-style 属性和 inset style value 的用法。


<html>
<head>
<style>
	 	div {
	 	 	 background-color: #c9f0aa;
	 	 	 width: 350px;
	 	 	 height: 350px;
	 	 	 margin: 50px;
	 	 	 padding: 15px;
	 	}
	 	.border-demo {
	 	 	 font-size: 20px;
	 	 	 color: #333;
	 	 	 padding: 20px;
	 	 	 margin: 10px;
	 	 	 border-block-style: inset;
	 	 	 border-block-width: 10px;
	 	 	 border-block-color: #56ba04;
}
</style>
</head>
<body>
<div>
<p class="border-demo">This is a border-block-style property example and inset style.</p>
</div>
</body>
</html>

CSS border-block-style - Outset 样式

以下示例演示了 border-block-style 属性和 outset style value 的用法。


<html>
<head>
<style>
	 	div {
	 	 	 background-color: #c9f0aa;
	 	 	 width: 350px;
	 	 	 height: 350px;
	 	 	 margin: 50px;
	 	 	 padding: 15px;
	 	}
	 	.border-demo {
	 	 	 font-size: 20px;
	 	 	 color: #333;
	 	 	 padding: 20px;
	 	 	 margin: 10px;
	 	 	 border-block-style: outset;
	 	 	 border-block-width: 10px;
	 	 	 border-block-color: #56ba04;
}
</style>
</head>
<body>
<div>
<p class="border-demo">This is a border-block-style property example and outset style.</p>
</div>
</body>
</html>

CSS border-block-style - 写作模式

以下示例演示了 border-block-style 属性在垂直写入模式下的用法。


<html>
<head>
<style>
	 	div {
	 	 	 background-color: #f0f0f0;
	 	 	 width: 200px;
	 	 	 height: 250px;
	 	 	 margin: 50px;
	 	 	 padding: 15px;
	 	}
	 	.border-demo {
	 	 	 font-size: 18px;
	 	 	 color: #333;
	 	 	 writing-mode: vertical-rl;
	 	 	 border: 7px solid red;
	 	 	 border-block-style: inset;
}
</style>
</head>
<body>
<div>
<p class="border-demo">This is a bordered element with a 	border style and vertical writing mode.</p>
</div>
</body>
</html>

打印本页