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 | 设置元素的逻辑内联结束边框的样式。 |
