CSS - border-inline 属性

CSS border-inline 是一个简写属性，它在一个声明中设置不同的逻辑内联边框属性的值，例如 border-inline-width、border-inline-style 和 border-inline-color。border-style 是必需的。如果未指定，则将使用颜色的默认值和宽度。此属性受书写模式、文本方向和方向的影响。

语法

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

属性值

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

CSS 内联边框属性示例

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

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

为了在一个声明中定义 border-inline-width、border-inline-style 和 border-inline-color 的值，我们使用 border-inline 属性。以下示例演示了如何操作。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: lightgrey;
         width: 100vh;
         height: 400px;
         display: block;
         justify-content: center;
         padding: 25px;
         text-align: center;
         font-weight:bold;
      }

      .borders {
         border: 1px solid black;
         padding: 20px;
      }

      .border1 {
         border-inline: 4px solid red;
      }

      .border2 {
         border-inline: 6px dashed blue;
      }

      .border3 {
         border-inline: 8px dotted yellow;
      }

      .border4 {
         border-inline: 8px double brown;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline property
   </h2>
   <div class="container">
      <p class="borders border1">
         This has border-inline property with 
         4px width solid style and red color
      </p>
      <p class="borders border2">
         This has border-inline property with 
         6px width dashed style and blue color
      </p>
      <p class="borders border3">
         This has border-inline property with 
         8px width dotted style and yellow color
      </p>
      <p class="borders border4 ">
         This has border-inline property with 
         8px width double style and brown color
      </p>
   </div>
</body>

</html>

内联边框属性的组成属性

border-inline 属性由属性 border-inline-width、border-inline-style 和 border-inline-color 组成。以下示例演示了这些单个属性如何组合以显示 border-inline 效果。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: lightgreen;
         width: 100vh;
         height: 200px;
         display: block;
         justify-content: center;
         padding: 25px;
         text-align: center;
         font-weight: bold;
      }

      .borders {
         border: 1px solid black;
         padding: 20px;
      }

      .border1 {
         border-inline-width: 4px;
         border-inline-style: solid;
         border-inline-color: red;
      }

      .border2 {
         border-inline-width: 6px;
         border-inline-style: dashed;
         border-inline-color: blue;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline property
   </h2>
   <div class="container">
   <p class="borders border1"> 
      This has border-inline-width:4px, 
      border-inline-style:solid, 
      border-inline-color:red
   </p>
   <p class="borders border2">
      This has border-inline-width:6px, 
      border-inline-style:dashed, 
      border-inline-color:blue
   </p>
   </div>
</body>

</html>

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

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

示例

   
<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: block;
         justify-content: center;
         padding: 25px;
         text-align: center;
         font-weight: bold;
      }

      .borders {
         border: 1px solid black;
         padding: 20px;
      }

      .border1 {
         border-inline: 4px solid red;
         writing-mode: horizontal-rl;
      }

      .border2 {
         border-inline: 6px dashed blue;
         writing-mode: vertical-rl;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline property
   </h2>
   <div class="container">
   <p class="borders border1">
      This has border-inline 4px width, 
      solid style, red color and 
      horizontal writing mode.
   </p>
   <p class="borders border2">
      This has border-inline 6px width,
      dashed style, blue color and 
      vertical writing mode.
   </p>
   </div>
</body>

</html>

支持的浏览器

属性
border-inline	87.0	87.0	66.0	14.1	73.0

css_properties_reference.htm

打印页面