CSS - border-inline-start-style 属性

CSS border-inline-start-style 属性确定元素内联起始边框的样式，该样式又根据元素的书写模式、方向和文本方向映射到元素的物理边框。

语法

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

属性值

值	描述
none	指定无边框。默认值。
hidden	与 none 类似，但用于表格元素的边框冲突解决。
dotted	指定点状边框。
dashed	指定虚线边框。
solid	指定实线边框。
double	指定双线边框。
groove	指定 3D 凹槽边框。效果取决于 border-color 值。
ridge	指定 3D 凸起边框。效果取决于 border-color 值。
inset	指定 3D 内嵌边框。效果取决于 border-color 值。
outset	指定 3D 外凸边框。效果取决于 border-color 值。
initial	将属性设置为默认值。
inherit	从父元素继承该属性。

CSS 内联起始边框样式属性示例

以下示例使用不同的值解释了 border-inline-start-style 属性。

无内联起始边框样式

为了不在内联起始处设置任何边框，我们使用 none 值。在以下示例中，使用了 none 值。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-none {
         border-inline-start-style: none;
      }

      p {
         padding: 15px;
         border: 6px solid gold;
         margin: 8px;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-start-style property
   </h2>
   <div>
      <p class="border-none">
      none inline start border
   </p>
   </div>
</body>

</html>

透明内联起始边框样式

为了拥有一个存在但不可见的边框，我们可以使用 transparent 值。transparent 值创建的是一个不可见的边框，而 none 值则创建的是无边框。以下示例显示了这种区别。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .borders {
         padding: 15px;
         margin: 8px;
      }

      .border1 {
         border: 8px solid gold;
         border-inline-start-style: none;
      }

      .border2 {
         border: 8px solid gold;
         border-inline-start-color: grey;
         border-inline-start-style: transparent;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-start-style property
   </h2>
   <div>
      <p class="borders border1">
         This border is using none value, 
         so it does not have an inline-start border
         indicated by the gap.
      </p>
      <p class="borders border2">
         This border is using transparent value,
         so it has an invisible border. Since a border
         exists, the border color is applied to it 
         indicated by the grey color.
      </p>
   </div>
</body>

</html>

点状内联起始边框样式

为了拥有一个点状内联起始边框，我们使用 dotted 值。在以下示例中，dotted 值与 border-inline-start-style 属性一起使用。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-dotted {
         border-inline-start-style: dotted;
      }

      p {
         padding: 15px;
         border: 6px solid gold;
         margin: 8px;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-start-style property
   </h2>
   <div>
      <p class="border-dotted">
         dotted inline start border
      </p>
   </div>
</body>

</html>

虚线内联起始边框样式

为了拥有一个虚线内联起始边框，我们使用 dashed 值。在以下示例中，dashed 值与 border-inline-start-style 属性一起使用。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-dashed {
         border-inline-start-style: dashed;
      }

      p {
         padding: 15px;
         border: 6px solid gold;
         margin: 8px;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-start-style property
   </h2>
   <div>
      <p class="border-dashed">
         dashed inline start border
      </p>
   </div>
</body>

</html>

实线内联起始边框样式

为了拥有一个实线内联起始边框，我们使用 solid 值。在以下示例中，solid 值与 border-inline-start-style 属性一起使用。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-solid {
         border-inline-start-style: solid;
      }

      p {
         padding: 15px;
         border: 6px dashed gold;
         margin: 8px;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-start-style property
   </h2>
   <div>
      <p class="border-solid">
         solid inline start border
      </p>
   </div>
</body>

</html>

双线内联起始边框样式

为了拥有一个双线内联起始边框，我们使用 double 值。在以下示例中，double 值与 border-inline-start-style 属性一起使用。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-double {
         border-inline-start-style: double;
      }

      p {
         padding: 15px;
         border: 6px solid gold;
         margin: 8px;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-start-style property
   </h2>
   <div>
      <p class="border-double">
         double inline start border
      </p>
   </div>
</body>

</html>

凹槽内联起始边框样式

为了拥有一个凹槽内联起始边框，我们使用 groove 值。在以下示例中，groove 值与 border-inline-start-style 属性一起使用。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-groove {
         border-inline-start-style: groove;
      }

      p {
         padding: 15px;
         border: 6px solid gold;
         margin: 8px;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-start-style property
   </h2>
   <div>
      <p class="border-groove">
         groove inline start border
      </p>
   </div>
</body>

</html>

凸起内联起始边框样式

为了拥有一个凸起内联起始边框，我们使用 ridge 值。在以下示例中，ridge 值与 border-inline-start-style 属性一起使用。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-ridge {
         border-inline-start-style: ridge;
      }

      p {
         padding: 15px;
         border: 6px solid gold;
         margin: 8px;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-start-style property
   </h2>
   <div>
      <p class="border-ridge">
         ridge inline start border
      </p>
   </div>
</body>

</html>

内嵌内联起始边框样式

为了拥有一个内嵌内联起始边框，我们使用 inset 值。在以下示例中，inset 值与 border-inline-start-style 属性一起使用。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-inset {
         border-inline-start-style: inset;
      }

      p {
         padding: 15px;
         border: 6px solid gold;
         margin: 8px;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-start-style property
   </h2>
   <div>
      <p class="border-inset">
         inset inline start border
      </p>
   </div>
</body>

</html>

外凸内联起始边框样式

为了拥有一个外凸内联起始边框，我们使用 outset 值。在以下示例中，outset 值与 border-inline-start-style 属性一起使用。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-outset {
         border-inline-start-style: outset;
      }

      p {
         padding: 15px;
         border: 6px solid gold;
         margin: 8px;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-start-style property
   </h2>
   <div>
      <p class="border-outset">
         outset inline start border
      </p>
   </div>
</body>

</html>

带有书写模式的内联起始边框样式

border-inline-start-style 属性受书写模式的影响，书写模式决定内联边框起始样式的方向。在垂直书写模式下，它影响顶部边框样式；在水平书写模式下，它影响左侧边框样式。以下示例显示了这些情况。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .borders {
         padding: 15px;
         border: 6px solid gold;
         margin: 8px;
         border-inline-start-style: dashed;
      }

      .border1 {
         writing-mode: horizontal-tb;
      }

      .border2 {
         writing-mode: vertical-rl;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-start-style property
   </h2>
   <div>
      <p class="borders border1">
         dashed inline start border with 
         horizontal writing mode
      </p>
      <p class="borders border2">
         dashed inline start border with 
         vertical writing mode.
      </p>
   </div>
</body>

</html>

带有方向的内联起始边框样式

border-inline-start-style 属性受方向的影响，方向也决定内联边框起始样式的方向。使用 rtl（从右到左）值时，会影响右侧边框样式；使用 ltr（从左到右）值时，会影响左侧边框样式。以下示例显示了这些情况。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .borders {
         padding: 15px;
         border: 6px solid gold;
         margin: 8px;
         border-inline-start-style: dashed;
      }

      .border1 {
         direction: rtl;
      }

      .border2 {
         direction: ltr;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-start-style property
   </h2>
   <div>
      <p class="borders border1">
         dashed inline start border with 
         (right-to-left) direction.
      </p>
      <p class="borders border2">
         dashed inline start border with 
         (left-to-right) direction.
      </p>
   </div>
</body>

</html>

支持的浏览器

属性
border-inline-start-style	69.0	79.0	41.0	12.1	56.0

css_properties_reference.htm

打印页面