CSS - border-inline-start-width 属性

上一页
下一页

CSS 的 border-inline-start-width 属性确定元素的逻辑内联起始边框宽度，然后根据元素的书写模式、方向和文本方向转换为物理边框宽度。

语法

border-inline-start-width: medium | thin | thick | length | initial | inherit;

属性值

值 描述
medium 指定中等边框宽度。默认值。
thin 指定细边框。
thick 指定粗边框。
length 厚度可以以值的格式给出。
initial 将属性设置为其默认值。
inherit 从父元素继承该属性。

CSS 边框内联起始宽度属性示例

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

使用中等值的边框内联起始宽度属性

要将中等宽度设置为内联起始边框，我们可以使用 medium 值。在以下示例中，border-inline-start-width 属性使用了 medium 值。

示例

    
<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: block;
         align-items: center;
         justify-content: center;
      }

      .borders {
         border: 1px solid #e74c3c;
         padding: 10px;
         text-align: center;
      }

      .border1 {
         border-inline-start-width: 1px;
      }

      .border2 {
         border-inline-start-width: medium;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-start-width property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border has same width all sides.
      </p>
      <p class="borders border2">
         This border has a 'medium' 
         border-inline-start-width.
      </p>
   </div>
</body>

</html>

使用细值的边框内联起始宽度属性

要将小宽度设置为内联起始边框，我们可以使用 thin 值。在以下示例中，border-inline-start-width 属性使用了 thin 值。

示例

    
<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: block;
         align-items: center;
         justify-content: center;
      }

      .borders {
         border: 5px solid #e74c3c;
         padding: 10px;
         text-align: center;
      }

      .border1 {
         border-inline-start-width: 5px;
      }

      .border2 {
         border-inline-start-width: thin;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-start-width property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border has same width all sides.
      </p>
      <p class="borders border2">
         This border has a 'thin' 
         border-inline-start-width.
      </p>
   </div>
</body>

</html>

使用粗值的边框内联起始宽度属性

要将粗宽度设置为内联起始边框，我们可以使用 thick 值。在以下示例中，border-inline-start-width 属性使用了 thick 值。

示例

    
<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: block;
         align-items: center;
         justify-content: center;
      }

      .borders {
         border: 2px solid #e74c3c;
         padding: 10px;
         text-align: center;
      }

      .border1 {
         border-inline-start-width: 2px;
      }

      .border2 {
         border-inline-start-width: thick;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-start-width property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border has same width all sides.
      </p>
      <p class="borders border2">
         This border has a 'thick' 
         border-inline-start-width.
      </p>
   </div>
</body>

</html>

使用长度值的边框内联起始宽度属性

要设置内联起始边框的宽度，我们可以使用长度值（例如 10px、15px 等）指定宽度。在以下示例中，border-inline-start-width 属性使用了长度值。

示例

    
<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: block;
         align-items: center;
         justify-content: center;
      }

      .borders {
         border: 2px solid #e74c3c;
         padding: 10px;
         text-align: center;
      }

      .border1 {
         border-inline-start-width: 10px;
      }

      .border2 {
         border-inline-start-width: 20px;
      }

      .border3 {
         border-inline-start-width: 50px;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-start-width property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border has 10px border-inline-start-width.
      </p>
      <p class="borders border2">
         This border has 20px border-inline-start-width.
      </p>
      <p class="borders border3">
         This border has 50px border-inline-start-width.
      </p>
   </div>
</body>

</html>

使用书写模式的边框内联起始宽度属性

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

示例

    
<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: block;
         align-items: center;
         justify-content: center;
      }

      .borders {
         border: 1px solid #e74c3c;
         padding: 10px;
         text-align: center;
      }

      .border1 {
         border-inline-start-width: thick;
         writing-mode: horizontal-tb;
      }

      .border2 {
         border-inline-start-width: thick;
         writing-mode: vertical-lr;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-start-width property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border has a 'thick' border-inline-start-width
         with horizontal writing mode.
      </p>
      <p class="borders border2">
         This border has a 'thick'
         der-inline-start-width with vertical writing mode.
      </p>
   </div>
</body>

</html>

使用方向的边框内联起始宽度属性

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

示例

    
<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: block;
         align-items: center;
         justify-content: center;
      }

      .borders {
         border: 1px solid #e74c3c;
         padding: 10px;
         text-align: center;
      }

      .border1 {
         border-inline-start-width: thick;
         direction: rtl;
      }

      .border2 {
         border-inline-start-width: thick;
         direction: ltr;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-start-width property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border has a 'thick' border-inline-start-width
         with (right-to-left) direction.
      </p>
      <p class="borders border2">
         This border has a 'thick' border-inline-start-width
         with (left-to-right) direction.
      </p>
   </div>
</body>

</html>

支持的浏览器

属性 Chrome Edge Firefox Safari Opera
border-inline-start-width 69.0 79.0 41.0 12.1 56.0
css_properties_reference.htm
打印页面
上一页
下一页
广告