- 根据 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>
