border-inline-style CSS 属性确定元素的逻辑内联边框的外观，根据元素的书写模式、方向性和文本方向将该样式转换为物理边框样式。
根据为 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 属性与无样式值的用法。
<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">具有 border-inline-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">带有 border-inline-style 属性和隐藏样式的示例。</p>
</div>
</body>
</html> CSS border-inline-style: dotted样式
以下示例演示了 border-inline-style 属性与dotted样式值的用法。
<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">带有 border-inline-style 属性和dotted的示例。</p>
</div>
</body>
</html> CSS border-inline-style: dashed样式
以下示例演示了 border-inline-style 属性和dashed样式值的用法。
<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">具有 border-inline-style 属性和虚线样式的示例。</p>
</div>
</body>
</html> CSS border-inline-style: Solid 样式
下面的示例演示了 border-inline-style 属性和solid样式的用法。
<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">具有 border-inline-style 属性和solid样式的示例。</p>
</div>
</body>
</html> CSS border-inline-style: Groove 样式
以下示例演示了 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">具有 border-inline-style 属性和groove样式的示例。</p>
</div>
</body>
</html> CSS border-inline-style: Ridge 样式
以下示例演示了 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">具有 border-inline-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: 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">带有 border-inline-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">具有 border-inline-style 属性和outset样式的示例。</p>
</div>
</body>
</html> CSS border-inline-style: Double 样式
以下示例演示了 border-inline-style 属性以及double样式和垂直书写模式的用法。
<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">带有垂直书写模式的 border-inline-style 属性的示例</p>
</div>
</body>
</html>