CSS - border-inline-start 属性

CSS border-inline-start 是一个简写属性，用于在一个语句中定义多个不同的逻辑内联起始边框属性 border-inline-start-width、border-inline-start-style 和 border-inline-start-color。书写模式、文本方向和方向决定边框的方向。

语法

border-inline-start: border-inline-start-width border-inline-start-style border-inline-start-color | initial | inherit;

属性值

值	描述
border-inline-start-width	它指定元素在内联方向起始处的边框宽度。默认值为 medium。
border-inline-start-style	它指定元素在内联方向起始处的边框样式。默认值为 none。
border-inline-start-color	它指定元素在内联方向起始处的边框颜色。默认值为边框的当前颜色。
initial	这将属性设置为其默认值。
inherit	这将从父元素继承属性。

CSS 内联起始边框属性示例

以下示例说明了使用不同值的 border-inline-start 属性。

定义内联起始边框属性的所有值

要在单个语句中设置 border-inline-start-width、border-inline-start-style 和 border-inline-start-color 的值，我们使用 border-inline-start 属性。三个属性的值可以在一个语句中给出。以下示例显示了如何执行此操作。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: lightgray;
         padding: 20px;
         width: 100vh;
         height: 350px;
         display: grid;
         align-items: center;
         justify-content: center;

      }

      .borders {
         color:blue;
         border: 1px solid black;
         margin: 15px;
         padding: 20px;
         text-align: center;
      }

      .border1 {
         border-inline-start: 6px solid #3498db;
      }

      .border2 {
         border-inline-start: 8px double #9900ff;
      }

      .border3 {
         border-inline-start: 10px dashed #009900;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-start property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border shows the boder-inline-start 
         property with 6px width, solid style 
         and #3498db color.
      </p>
      <p class="borders border2">
         This border shows the boder-inline-start
         property with 8px width, double style
         and #9900ff color.
      </p>
      <p class="borders border3">
         This border shows the boder-inline-start
         property with 10px width, dashed style
         and #009900 color.
      </p>
   </div>
</body>

</html>

内联起始边框属性的组成属性

border-inline-start 属性是属性 border-inline-start-width、border-inline-start-style 和 border-inline-start-color 的组合。以下示例显示了如何组合使用这些属性来显示 border-inline-start 属性效果。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: lightgreen;
         padding: 20px;
         width: 100vh;
         height: 350px;
         display: grid;
         align-items: center;
         justify-content: center;

      }

      .borders {
         color:blue;
         border: 1px solid black;
         margin: 15px;
         padding: 20px;
         text-align: center;
      }

      .border1 {
         border-inline-start-width: 8px;
         border-inline-start-style: dashed;
         border-inline-start-color: red;
      }

      .border2 {
         border-inline-start-width: 8px;
         border-inline-start-style: dotted;
         border-inline-start-color:  orange;
      }

   </style>
</head>

<body>
   <h2>
      CSS border-inline-start property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border shows the boder-inline-start
         property with 8px width, dashed style 
         and red color.
      </p>
      <p class="borders border2">
         This border shows the boder-inline-start
         property with 8px width, dotted style 
         and orange color.
      </p>
   </div>
</body>

</html>

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

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

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: lightgreen;
         padding: 20px;
         width: 100vh;
         height: 350px;
         display: grid;
         align-items: center;
         justify-content: center;

      }

      .borders {
         color:blue;
         border: 1px solid black;
         margin: 15px;
         padding: 20px;
         text-align: center;
      }

      .border1 {
         border-inline-start: 8px dashed red;
         writing-mode: horizontal-tb ;
      }

      .border2 {
         border-inline-start: 8px dashed red;
         writing-mode: vertical-rl;
      }

   </style>
</head>

<body>
   <h2>
      CSS border-inline-start property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border shows the boder-inline-start
         property with 8px width, dashed style and
         red color with horizontal writing mode.
      </p>
      <p class="borders border2">
         This border shows the boder-inline-start 
         property with 8px width, dashed style and 
         red color with vertical writing mode.
      </p>
   </div>
</body>

</html>

带有方向的内联起始边框属性

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

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: lightgray;
         padding: 20px;
         width: 100vh;
         height: 350px;
         display: grid;
         align-items: center;
         justify-content: center;

      }

      .borders {
         color:blue;
         border: 1px solid black;
         margin: 15px;
         padding: 20px;
         text-align: center;
      }

      .border1 {
         border-inline-start: 8px dashed red;
         direction: rtl ;
      }

      .border2 {
         border-inline-start: 8px dashed red;
         direction: ltr;
      }

   </style>
</head>

<body>
   <h2>
      CSS border-inline-start property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border shows the boder-inline-start property
         with 8px width, dashed style and red color with
         right-to-left direction.
      </p>
      <p class="borders border2">
         This border shows the boder-inline-start property
         with 8px width, dashed style and red color 
         with left-to-right direction.
      </p>
   </div>
</body>

</html>

支持的浏览器

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

css_properties_reference.htm

打印页面