CSS 属性

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: Groove 边框样式

这里是一个显示 p 元素内联起始边框的groove边框样式的示例:

<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 Border

这里是一个显示 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: Ridge Border 

这里是显示 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- 相关的 CSS 属性列表开始样式:

属性描述
border-block-start-style设置元素逻辑块起始边框的样式。
border-block-end-style设置元素逻辑块结束边框的样式。
border-inline-end-style设置逻辑的样式元素的内联结束边框。