CSS - border-inline-start-style 属性

上一页
下一页

CSS border-inline-start-style 属性确定元素的内联开始边框的样式，而该边框又映射到元素的物理边框。

此属性是一个逻辑内联开始边框，这意味着其值取决于元素的书写模式、方向性和文本方向。

根据 writing-mode、direction 和 text-orientation 的值，内联开始边框对应于 border-top-style、border-right-style、border-bottom-style 或 border-left-style。

可能的值

  • <border-style>：显示边框的线条样式。请参阅边框样式。

适用于

所有 HTML 元素。

语法


border-inline-start-style = none | hidden | dotted | dashed |solid | double | groove | ridge | inset | outset;

CSS border-inline-start-style - 实心边框样式

下面是一个示例，显示了 p 元素的内联开始边框的实线边框样式：


<html>
<head>
<style>
	 	div {
	 	 	 background-color: black;
	 	 	 width: 220px;
	 	 	 height: max-content;
	 	 	 padding: 10px;
	 	}

	 	.border-solid {
	 	 	 border-inline-start-style: solid;
	 	}

	 	p {
	 	 	 padding: 15px;
	 	 	 color: white;
	 	 	 border: 5px solid gold;
	 	 	 margin: 8px;
	 	}
</style>
</head>
<body>
	 	<div>
	 	 	 <p class="border-solid">solid inline start border</p>
	 	</div>	
</body>
</html>

CSS border-inline-start-style - 插入边框样式

以下示例显示了 p 元素的内联开始边框的插入边框样式：


<html>
<head>
<style>
	 	div {
	 	 	 background-color: black;
	 	 	 width: 220px;
	 	 	 height: max-content;
	 	 	 padding: 10px;
	 	}

	 	.border-inset {
	 	 	 border-inline-start-style: inset;
	 	}

	 	p {
	 	 	 padding: 15px;
	 	 	 color: white;
	 	 	 border: 5px solid gold;
	 	 	 margin: 8px;
	 	}
</style>
</head>
<body>
	 	<div>
	 	 	 <p class="border-inset">inset inline start border</p>
	 	</div>	
</body>
</html>

CSS border-inline-start-style - 虚线边框样式

以下示例显示了 p 元素的内联开始边框的虚线边框样式：


<html>
<head>
<style>
	 	div {
	 	 	 background-color: black;
	 	 	 width: 220px;
	 	 	 height: max-content;
	 	 	 padding: 10px;
	 	}

	 	.border-dashed {
	 	 	 border-inline-start-style: dashed;
	 	}

	 	p {
	 	 	 padding: 15px;
	 	 	 color: white;
	 	 	 border: 5px solid gold;
	 	 	 margin: 8px;
	 	}
</style>
</head>
<body>
	 	<div>
	 	 	 <p class="border-dashed">dashed inline start border</p>
	 	</div>	
</body>
</html>

CSS border-inline-start-style - 虚线边框样式

以下示例显示了 p 元素的内联开始边框的虚线边框样式：


<html>
<head>
<style>
	 	div {
	 	 	 background-color: black;
	 	 	 width: 220px;
	 	 	 height: max-content;
	 	 	 padding: 10px;
	 	}

	 	.border-dotted {
	 	 	 border-inline-start-style: dotted;
	 	}

	 	p {
	 	 	 padding: 15px;
	 	 	 color: white;
	 	 	 border: 5px solid gold;
	 	 	 margin: 8px;
	 	}
</style>
</head>
<body>
	 	<div>
	 	 	 <p class="border-dotted">dotted inline start border</p>
	 	</div>	
</body>
</html>

CSS border-inline-start-style - 凹槽边框样式

以下示例显示了 p 元素的内联开始边界的凹槽边框样式：


<html>
<head>
<style>
	 	div {
	 	 	 background-color: black;
	 	 	 width: 220px;
	 	 	 height: max-content;
	 	 	 padding: 10px;
	 	}

	 	.border-groove {
	 	 	 border-inline-start-style: groove;
	 	}

	 	p {
	 	 	 padding: 15px;
	 	 	 color: white;
	 	 	 border: 5px solid gold;
	 	 	 margin: 8px;
	 	}
</style>
</head>
<body>
	 	<div>
	 	 	 <p class="border-groove">groove inline start border</p>
	 	</div>	
</body>
</html>

CSS border-inline-start-style - 双边框样式

以下示例显示了 p 元素的内联开始边框的双边框样式：


<html>
<head>
<style>
	 	div {
	 	 	 background-color: black;
	 	 	 width: 220px;
	 	 	 height: max-content;
	 	 	 padding: 10px;
	 	}

	 	.border-double {
	 	 	 border-inline-start-style: double;
	 	}

	 	p {
	 	 	 padding: 15px;
	 	 	 color: white;
	 	 	 border: 5px solid gold;
	 	 	 margin: 8px;
	 	}
</style>
</head>
<body>
	 	<div>
	 	 	 <p class="border-double">double inline start border</p>
	 	</div>	
</body>
</html>

CSS border-inline-start-style - Outset 边框样式

以下示例显示了 p 元素的内联开始边框的开头边框样式：


<html>
<head>
<style>
	 	div {
	 	 	 background-color: black;
	 	 	 width: 220px;
	 	 	 height: max-content;
	 	 	 padding: 10px;
	 	}

	 	.border-outset {
	 	 	 border-inline-start-style: outset;
	 	}

	 	p {
	 	 	 padding: 15px;
	 	 	 color: white;
	 	 	 border: 5px solid gold;
	 	 	 margin: 8px;
	 	}
</style>
</head>
<body>
	 	<div>
	 	 	 <p class="border-outset">outset inline start border</p>
	 	</div>	
</body>
</html>

CSS border-inline-start-style - 山脊边框样式

以下示例显示了 p 元素的内联开始边界的脊边框样式：


<html>
<head>
<style>
	 	div {
	 	 	 background-color: black;
	 	 	 width: 220px;
	 	 	 height: max-content;
	 	 	 padding: 10px;
	 	}

	 	.border-ridge {
	 	 	 border-inline-start-style: ridge;
	 	}

	 	p {
	 	 	 padding: 15px;
	 	 	 color: white;
	 	 	 border: 5px solid gold;
	 	 	 margin: 8px;
	 	}
</style>
</head>
<body>
	 	<div>
	 	 	 <p class="border-ridge">ridge inline start border</p>
	 	</div>	
</body>
</html>

CSS border-inline-start-style - 无边框样式

下面是一个示例，显示了 p 元素的内联开始边框的无边框样式：


<html>
<head>
<style>
	 	div {
	 	 	 background-color: black;
	 	 	 width: 220px;
	 	 	 height: max-content;
	 	 	 padding: 10px;
	 	}

	 	.border-none {
	 	 	 border-inline-start-style: none;
	 	}

	 	p {
	 	 	 padding: 15px;
	 	 	 color: white;
	 	 	 border: 5px solid gold;
	 	 	 margin: 8px;
	 	}
</style>
</head>
<body>
	 	<div>
	 	 	 <p class="border-none">No inline start border</p>
	 	</div>	
</body>
</html>

CSS border-inline-start-style - 基于写作模式（水平）

下面是一个示例，显示了基于文本的书写模式（水平）的 p 元素的内联开始边框的样式。给出的样式是虚线和双倍的。您可以使用其他样式值来查看更改。


<html>
<head>
<style>
	 	div {
	 	 	 background-color: peachpuff;
	 	 	 width: 220px;
	 	 	 height: 220px;
	 	}

	 	.sampleText-wm-htl {
	 	 	 writing-mode: horizontal-tb;
	 	 	 border: 5px solid blue;
	 	 	 border-inline-start-style: dotted;
	 	}

	 	p {
	 	 	 padding: 5px;
	 	}
</style>
</head>
<body>
	 	<div>
	 	 	 <p class="sampleText-wm-htl">Horizontal Text</p>
	 	</div>	
</body>
</html>

CSS border-inline-start-style - 基于写作模式（垂直）

下面是一个示例，显示了基于文本的书写模式（垂直）的 p 元素的内联开始边框的样式。给出的样式是虚线和双倍的。您可以使用其他样式值来查看更改。


<html>
<head>
<style>
	 	div {
	 	 	 background-color: peachpuff;
	 	 	 width: 220px;
	 	 	 height: 220px;
	 	}

	 	.sampleText-wm-vtl {
	 	 	 writing-mode: vertical-rl;
	 	 	 border: 5px solid red;
	 	 	 border-inline-start-style: double;
	 	}

	 	p {
	 	 	 padding: 5px;
	 	}
</style>
</head>
<body>
	 	<div>
	 	 	 <p class="sampleText-wm-vtl">Vertical Text</p>
	 	</div>	
</body>
</html>

CSS border-inline-start-style - 基于方向（从左到右）

下面是一个示例，显示了基于文本方向（从左到右）的 p 元素的内联开始边框的样式。给出的样式是虚线和凹槽。您可以使用其他样式值来查看更改。


<html>
<head>
<style>
	 	div {
	 	 	 background-color: black;
	 	 	 width: 220px;
	 	 	 height: 220px;
	 	}

	 	.sampleText-dir-ltr {
	 	 	 direction: ltr;
	 	 	 border: 8px solid red;
	 	 	 border-inline-start-style: dashed;
	 	}

	 	p {
	 	 	 padding: 15px;
	 	 	 color: white;
	 	}
</style>
</head>
<body>
	 	<div>
	 	 	 <p class="sampleText-dir-ltr">Direction ltr</p>
	 	</div>	
</body>
</html>

CSS border-inline-start-style - 基于方向（从右到左）

下面是一个示例，显示了基于文本方向的 p 元素的内联开始边框的样式，该方向是从右到左。给出的样式是虚线和凹槽。您可以使用其他样式值来查看更改。


<html>
<head>
<style>
	 	div {
	 	 	 background-color: black;
	 	 	 width: 220px;
	 	 	 height: 220px;
	 	}

	 	.sampleText-dir-rtl {
	 	 	 direction: rtl;
	 	 	 border: 10px solid gold;
	 	 	 border-inline-start-style: groove;
	 	}

	 	p {
	 	 	 padding: 15px;
	 	 	 color: white;
	 	}
</style>
</head>
<body>
	 	<div>
	 	 	 <p class="sampleText-dir-rtl">Direction rtl</p>
	 	</div>	
</body>
</html>

CSS border-inline-start-style - 相关属性

以下是与 border-inline-start-style 相关的 CSS 属性列表：

属性 描述
border-block-start-style 设置元素的逻辑块开始边框的样式。
border-block-end-style 设置元素的逻辑块结束边框的样式。
border-inline-end-style 设置元素的逻辑内联结束边框的样式。
打印本页
上一页
下一页