CSS - border-block-start-style 属性_CSS 菜鸟教程

元素的逻辑块开始边框样式由CSS border-block-start-style 属性确定，该属性转换为物理边框样式，具体取决于元素的书写模式、方向性和文本方向。

根据为 writing-mode、direction 和 text-orientation 提供的值，其功能对应于 border-top-style、border-right-style、border-right-style 或 border-left-style。
元素的其他边框样式由相关属性 border-block-end-style、border-inline-start-style 和 border-inline-end-style 定义。

可能的值

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

语法

border-block-start-style = <line-style>

适用于

所有 HTML 元素。

CSS border-block-start-style - 无样式

以下示例演示了 border-block-start-style 属性与非样式值的用法。

<html>
<head>
<style>
	 	.container {
	 	 	 background-color: #c9abaf;
	 	 	 width: 350px;
	 	 	 height: 350px;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	 	 border-radius: 10px;
	 	}
	 	.demo-border {
	 	 	 border-block-start-style: none;	
	 	 	 border-block-start-width: 8px;
	 	 	 padding: 10px;
	 	 	 font-size: 20px;
	 	 	 font-weight: bold;
	 	 	 color: #333;
	 	}
</style>
</head>
<body>
<div class="container">
	 	<p class="demo-border">This is a border-block-start-style example with none style.</p>
</div>
</body>
</html>

CSS border-block-start-style - 隐藏样式

以下示例演示了 border-block-start-style 属性与隐藏样式值的用法。

<html>
<head>
<style>
	 	.container {
	 	 	 background-color: #b6d9f0;
	 	 	 width: 350px;
	 	 	 height: 350px;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	 	 border-radius: 10px;
	 	}
	 	.demo-border {
	 	 	 border-block-start-style: hidden;	
	 	 	 border-block-start-width: 8px;
	 	 	 padding: 10px;
	 	 	 font-size: 20px;
	 	 	 font-weight: bold;
	 	 	 color: #333;
	 	}
</style>
</head>
<body>
<div class="container">
	 	<p class="demo-border">This is a border-block-start-style example with hidden style.</p>
</div>
</body>
</html>

CSS border-block-start-style - 虚线样式

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

<html>
<head>
<style>
	 	.container {
	 	 	 background-color: #ffe4b5;
	 	 	 width: 250px;
	 	 	 height: 250px;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	 	 border-radius: 10px;
	 	 	 box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
	 	}
	 	.demo-border {
	 	 	 border: 5px green;
	 	 	 border-block-start-style: dotted;
	 	 	 padding: 10px;
	 	 	 font-size: 20px;
	 	 	 font-weight: bold;
	 	 	 color: #333;
	 	}
</style>
</head>
<body>
<div class="container">
<p class="demo-border">this is border-block-start-style example</p>
</div>
</body>
</html>

CSS border-block-start-style - 虚线样式

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

<html>
<head>
<style>
	 	.container {
	 	 	 background-color: #f0e5c9;
	 	 	 width: 350px;
	 	 	 height: 350px;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	 	 border-radius: 10px;
	 	}
	 	.demo-border {
	 	 	 border-block-start-style: dashed;	
	 	 	 border-block-start-width: 5px;
	 	 	 padding: 10px;
	 	 	 font-size: 20px;
	 	 	 font-weight: bold;
	 	 	 color: #333;
	 	}
</style>
</head>
<body>
<div class="container">
	 	<p class="demo-border">This is a border-block-start-style example with dashed style.</p>
</div>
</body>
</html>

CSS border-block-start-style - 纯色样式

以下示例演示了 border-block-start-style 属性与实体样式值的用法。

<html>
<head>
<style>
	 	.container {
	 	 	 background-color: #f0c7b1;
	 	 	 width: 350px;
	 	 	 height: 350px;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	 	 border-radius: 10px;
	 	}
	 	.demo-border {
	 	 	 border-block-start-style: solid;	
	 	 	 border-block-start-width: 6px;
	 	 	 padding: 10px;
	 	 	 font-size: 20px;
	 	 	 font-weight: bold;
	 	 	 color: #333;
	 	}
</style>
</head>
<body>
<div class="container">
	 	<p class="demo-border">This is a border-block-start-style example with solid style.</p>
</div>
</body>
</html>

CSS border-block-start-style - 双重样式

以下示例演示了具有双精度样式值的 border-block-start-style 属性的用法。

<html>
<head>
<style>
	 	.container {
	 	 	 background-color: #edd97e;
	 	 	 width: 350px;
	 	 	 height: 350px;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	 	 border-radius: 10px;
	 	}
	 	.demo-border {
	 	 	 border-block-start-style: double;	
	 	 	 border-block-start-width: 9px;
	 	 	 padding: 10px;
	 	 	 font-size: 20px;
	 	 	 font-weight: bold;
	 	 	 color: #333;
	 	}
</style>
</head>
<body>
<div class="container">
	 	<p class="demo-border">This is a border-block-start-style example with double style.</p>
</div>
</body>
</html>

CSS border-block-start-style - 凹槽样式

以下示例演示了 border-block-start-style 属性与 groove 样式值的用法。

<html>
<head>
<style>
	 	.container {
	 	 	 background-color: #64e3ae;
	 	 	 width: 350px;
	 	 	 height: 350px;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	 	 border-radius: 10px;
	 	}
	 	.demo-border {
	 	 	 border-block-start-style: groove;	
	 	 	 border-block-start-width: 10px;
	 	 	 padding: 10px;
	 	 	 font-size: 20px;
	 	 	 font-weight: bold;
	 	 	 color: #333;
	 	}
</style>
</head>
<body>
<div class="container">
	 	<p class="demo-border">This is a border-block-start-style example with groove style.</p>
</div>
</body>
</html>

CSS border-block-start-style - 山脊样式

以下示例演示了 border-block-start-style 属性与山脊样式值的用法。

<html>
<head>
<style>
	 	.container {
	 	 	 background-color: #64bfe3;
	 	 	 width: 350px;
	 	 	 height: 350px;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	 	 border-radius: 10px;
	 	}
	 	.demo-border {
	 	 	 border-block-start-style: ridge;	
	 	 	 border-block-start-width: 10px;
	 	 	 padding: 10px;
	 	 	 font-size: 20px;
	 	 	 font-weight: bold;
	 	 	 color: #333;
	 	}
</style>
</head>
<body>
<div class="container">
	 	<p class="demo-border">This is a border-block-start-style example with ridge style.</p>
</div>
</body>
</html>

CSS border-block-start-style - 插入样式

以下示例演示了 border-block-start-style 属性与 inset 样式值的用法。

<html>
<head>
<style>
	 	.container {
	 	 	 background-color: #ebcdf7;
	 	 	 width: 350px;
	 	 	 height: 350px;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	 	 border-radius: 10px;
	 	}
	 	.demo-border {
	 	 	 border-block-start-style: inset;	
	 	 	 border-block-start-width: 10px;
	 	 	 padding: 10px;
	 	 	 font-size: 20px;
	 	 	 font-weight: bold;
	 	 	 color: #333;
	 	}
</style>
</head>
<body>
<div class="container">
	 	<p class="demo-border">This is a border-block-start-style example with inset style.</p>
</div>
</body>
</html>

CSS border-block-start-style - Outset 样式

以下示例演示了 border-block-start-style 属性与 outset 样式值的用法。

<html>
<head>
<style>
	 	.container {
	 	 	 background-color: #e8879c;
	 	 	 width: 350px;
	 	 	 height: 350px;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	 	 border-radius: 10px;
	 	}
	 	.demo-border {
	 	 	 border-block-start-style: outset;	
	 	 	 border-block-start-width: 8px;
	 	 	 padding: 10px;
	 	 	 font-size: 20px;
	 	 	 font-weight: bold;
	 	 	 color: #333;
	 	}
</style>
</head>
<body>
<div class="container">
	 	<p class="demo-border">This is a border-block-start-style example with outset style.</p>
</div>
</body>
</html>

CSS border-block-start-style - 写作模式

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

<html>
<head>
<style>
	 	body {
	 	 	 font-family: 'Arial', sans-serif;
	 	 	 margin: 50px;
	 	 	 padding: 50px;
	 	 	 background-color: #f0f0f0;
	 	}
	 	.container {
	 	 	 background-color: #77c6ed;
	 	 	 width: 450px;
	 	 	 height: 450px;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	 	 border-radius: 10px;
	 	 	 box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
	 	}
	 	.demo-border {
	 	 	 writing-mode: vertical-rl;
	 	 	 border: 6px dashed blue;
	 	 	 border-block-start-style: groove;
	 	 	 padding: 10px;
	 	 	 font-size: 20px;
	 	 	 font-weight: bold;
	 	 	 color: #333;
	 	}
</style>
</head>
<body>
<div class="container">
<p class="demo-border">This is border-block-start-style example with vertical text</p>
</div>
</body>
</html>

<< CSS - border-block-start-color 属性 CSS - border-block-start-width 属性 >>