CSS - border-inline-style 属性

CSS border-inline-style 属性确定元素的逻辑内联边框的外观，并根据元素的书写模式、方向性和文本方向将该样式转换为物理边框样式。

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

可能的值

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

语法


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

适用于

所有 HTML 元素。

CSS border-inline-style - 无样式

以下示例演示了 border-inline-style 属性和 none 样式值的用法。


<html>
<head>
<style>
	 	body {
	 	 	 font-family: 'Arial', sans-serif;
	 	 	 margin: 50px;
	 	 	 padding: 50px;
	 	 	 background-color: #f3f3f3;
	 	}
	 	.custom-container {
	 	 	 background-color: #f7f2f3;
	 	 	 width: 380px;
	 	 	 height: 380px;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	 	 border-radius: 8px;
	 	 	 box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
	 	}
	 	.mod-border {
	 	 	 border: 3px solid #e83a4e;
	 	 	 border-inline-style: none;
	 	 	 padding: 12px;
	 	 	 margin: 15px;
	 	 	 font-size: 18px;
	 	 	 font-weight: bold;
	 	 	 color: #333;
	 	}
</style>
</head>
<body>
<div class="custom-container">
<p class="mod-border">A example with border-inline-style property and none style.</p>
</div>
</body>
</html>

CSS border-inline-style - 隐藏样式

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


<html>
<head>
<style>
	 	body {
	 	 	 font-family: 'Arial', sans-serif;
	 	 	 margin: 50px;
	 	 	 padding: 50px;
	 	 	 background-color: #f3f3f3;
	 	}
	 	.custom-container {
	 	 	 background-color: #f7f2f3;
	 	 	 width: 380px;
	 	 	 height: 380px;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	 	 border-radius: 8px;
	 	 	 box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
	 	}
	 	.mod-border {
	 	 	 border: 5px solid blue;
	 	 	 border-inline-style: hidden;
	 	 	 padding: 12px;
	 	 	 margin: 15px;
	 	 	 font-size: 18px;
	 	 	 font-weight: bold;
	 	 	 color: #333;
	 	}
</style>
</head>
<body>
<div class="custom-container">
<p class="mod-border">A example with border-inline-style property and hidden style.</p>
</div>
</body>
</html>

CSS border-inline-style - 虚线样式

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


<html>
<head>
<style>
	 	body {
	 	 	 font-family: 'Arial', sans-serif;
	 	 	 margin: 50px;
	 	 	 padding: 50px;
	 	 	 background-color: #f3f3f3;
	 	}
	 	.custom-container {
	 	 	 background-color: #ffa07a;
	 	 	 width: 380px;
	 	 	 height: 380px;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	 	 border-radius: 8px;
	 	 	 box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.4);
	 	}
	 	.mod-border {
	 	 	 border: 3px dashed #b32509;
	 	 	 border-inline-style: dotted;
	 	 	 border-inline-width: 8px;
	 	 	 padding: 12px;
	 	 	 margin: 10px;
	 	 	 font-weight: bold;
	 	 	 color: #333;
	 	}
</style>
</head>
<body>
<div class="custom-container">
<p class="mod-border">A example with border-inline-style property and dotted style.</p>
</div>
</body>
</html>

CSS border-inline-style - 虚线样式

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


<html>
<head>
<style>
	 	body {
	 	 	 font-family: 'Arial', sans-serif;
	 	 	 margin: 50px;
	 	 	 padding: 50px;
	 	 	 background-color: #f3f3f3;
	 	}
	 	.custom-container {
	 	 	 background-color: #e3dd84;
	 	 	 width: 380px;
	 	 	 height: 380px;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	 	 border-radius: 8px;
	 	 	 box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.4);
	 	}
	 	.mod-border {
	 	 	 border: 3px solid #9e9405;
	 	 	 border-inline-style: dashed;
	 	 	 border-inline-width: 8px;
	 	 	 padding: 12px;
	 	 	 margin: 10px;
	 	 	 font-weight: bold;
	 	 	 color: #333;
	 	}
</style>
</head>
<body>
<div class="custom-container">
<p class="mod-border">A example with border-inline-style property and dashed style.</p>
</div>
</body>
</html>

CSS border-inline-style - 纯色样式

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


<html>
<head>
<style>
	 	body {
	 	 	 font-family: 'Arial', sans-serif;
	 	 	 margin: 50px;
	 	 	 padding: 50px;
	 	 	 background-color: #f3f3f3;
	 	}
	 	.custom-container {
	 	 	 background-color: #88dceb;
	 	 	 width: 380px;
	 	 	 height: 380px;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	 	 border-radius: 8px;
	 	 	 box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.4);
	 	}
	 	.mod-border {
	 	 	 border: 3px solid #096396;
	 	 	 border-inline-style: solid;
	 	 	 border-inline-width: 10px;
	 	 	 padding: 12px;
	 	 	 margin: 15px;
	 	 	 font-weight: bold;
	 	 	 color: #333;
	 	}
</style>
</head>
<body>
<div class="custom-container">
<p class="mod-border">A example with border-inline-style property and solid style.</p>
</div>
</body>
</html>

CSS border-inline-style - 凹槽样式

以下示例演示了 border-inline-style 属性以及 groove 样式值的用法。


<html>
<head>
<style>
	 	body {
	 	 	 font-family: 'Arial', sans-serif;
	 	 	 margin: 50px;
	 	 	 padding: 50px;
	 	 	 background-color: #f3f3f3;
	 	}
	 	.custom-container {
	 	 	 background-color: #b9e7ed;
	 	 	 width: 380px;
	 	 	 height: 380px;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	 	 border-radius: 8px;
	 	 	 box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.4);
	 	}
	 	.mod-border {
	 	 	 border: 3px solid gray;
	 	 	 border-inline-style: groove;
	 	 	 border-inline-width: 10px;
	 	 	 border-inline-color: blue;
	 	 	 padding: 12px;
	 	 	 margin: 15px;
	 	 	 font-size: 20px;
	 	 	 font-weight: bold;
	 	 	 color: #333;
	 	}
</style>
</head>
<body>
<div class="custom-container">
<p class="mod-border">A example with border-inline-style property and groove style.</p>
</div>
</body>
</html>

CSS border-inline-style - 山脊样式

以下示例演示了 border-inline-style 属性和 Ridge 样式值的用法。


<html>
<head>
<style>
	 	body {
	 	 	 font-family: 'Arial', sans-serif;
	 	 	 margin: 50px;
	 	 	 padding: 50px;
	 	 	 background-color: #f3f3f3;
	 	}
	 	.custom-container {
	 	 	 background-color: #e8e6e6;
	 	 	 width: 380px;
	 	 	 height: 380px;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	 	 border-radius: 8px;
	 	 	 box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.4);
	 	}
	 	.mod-border {
	 	 	 border: 3px solid #e83a4e;
	 	 	 border-inline-style: ridge;
	 	 	 border-inline-width: 10px;
	 	 	 border-inline-color: blue;
	 	 	 padding: 12px;
	 	 	 margin: 15px;
	 	 	 font-size: 18px;
	 	 	 font-weight: bold;
	 	 	 color: #333;
	 	}
</style>
</head>
<body>
<div class="custom-container">
<p class="mod-border">A example with border-inline-style property and ridge style.</p>
</div>
</body>
</html>

CSS border-inline-style - 插入样式

以下示例演示了 border-inline-style 属性以及 inset 样式值的用法。


<html>
<head>
<style>
	 	body {
	 	 	 font-family: 'Arial', sans-serif;
	 	 	 margin: 50px;
	 	 	 padding: 50px;
	 	 	 background-color: #f3f3f3;
	 	}
	 	.custom-container {
	 	 	 background-color: #f7f2f3;
	 	 	 width: 380px;
	 	 	 height: 380px;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	 	 border-radius: 8px;
	 	 	 box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
	 	}
	 	.mod-border {
	 	 	 border: 3px solid #e83a4e;
	 	 	 border-inline-style: inset;
	 	 	 border-inline-width: 10px;
	 	 	 border-inline-color: blue;
	 	 	 padding: 12px;
	 	 	 margin: 15px;
	 	 	 font-size: 18px;
	 	 	 font-weight: bold;
	 	 	 color: #333;
	 	}
</style>
</head>
<body>
<div class="custom-container">
<p class="mod-border">A example with border-inline-style property and inset style.</p>
</div>
</body>
</html>

CSS border-inline-style - 出位置样式

以下示例演示了 border-inline-style 属性以及 outset 样式值的用法。


<html>
<head>
<style>
	 	body {
	 	 	 font-family: 'Arial', sans-serif;
	 	 	 margin: 50px;
	 	 	 padding: 50px;
	 	 	 background-color: #f3f3f3;
	 	}
	 	.custom-container {
	 	 	 background-color: #f7f2f3;
	 	 	 width: 380px;
	 	 	 height: 380px;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	 	 border-radius: 8px;
	 	 	 box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
	 	}
	 	.mod-border {
	 	 	 border: 3px solid #e83a4e;
	 	 	 border-inline-style: outset;
	 	 	 border-inline-width: 8px;
	 	 	 border-inline-color: blue;
	 	 	 padding: 12px;
	 	 	 margin: 15px;
	 	 	 font-size: 18px;
	 	 	 font-weight: bold;
	 	 	 color: #333;
	 	}
</style>
</head>
<body>
<div class="custom-container">
<p class="mod-border">A example with border-inline-style property and outset style.</p>
</div>
</body>
</html>

CSS border-inline-style - 双重样式

以下示例演示了 border-inline-style 属性以及 double style 和垂直书写模式的用法。


<html>
<head>
<style>
	 	.body-style {
	 	 	 margin: 50px;
	 	 	 padding: 50px;
	 	 	 background-color: #f3f3f3;
	 	}
	 	.container {
	 	 	 background-color: #ffcccb;
	 	 	 width: 380px;
	 	 	 height: 380px;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	 	 border-radius: 8px;
	 	 	 box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.4);
	 	}
	 	.new-border {
	 	 	 writing-mode: vertical-rl;
	 	 	 border: 6px solid #e74c3c;
	 	 	 border-inline-style: double;
	 	 	 padding: 15px;
	 	 	 margin: 10px 10px;
	 	 	 font-weight: bold;
	 	 	 color: #2c3e50;
	 	}
</style>
</head>
<body class="body-style">
<div class="container">
<p class="new-border">An example with border-inline-style property with vertical writing mode</p>
</div>
</body>
</html>

打印本页