Css 简明教程

CSS - border-inline

CSS 属性 border-inline 是一种速记属性，它为不同的逻辑内联边框属性设置值，并将它们组合到一个单独的语句中。

元素的书写模式、方向和文本方向决定了 border-inline 属性如何映射到实际边界。
根据 writing-mode 、 direction 和 text-orientation 的值， border-inline 的行为类似于 border-top 和 border-bottom 属性，或者类似于 border-right 和 border-left 属性。
使用 border-block 属性（它设置 border-block-start 和 border-block-end ）在其他维度中建立边框。

Possible values

border-inline 使用以下一项或多项进行指定，顺序不限：

* <'border-width'>* - 边框宽度。
* <'border-style'>* - 边框线条样式。
* <color>* - 边框颜色。

Constituent properties

此属性是下列 CSS 属性的速记：

Syntax

border-inline = <'border-block-start'>

Applies to

所有 HTML 元素。

CSS border-inline - Basic Example

以下示例演示了 border-inline CSS 属性的用法。

<html>
<head>
<style>
   .container {
      background-color: #ffeeba;
      width: 450px;
      height: 450px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      border-radius: 10px;
      box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
   }
   .custom-border {
      border-inline: 6px dashed #3498db;
      padding: 10px;
      font-weight: bold;
      color: #333;
   }
</style>
</head>
<body>
<div class="container">
<p class="custom-border">A Example with border-inline property</p>
</div>
</body>
</html>

CSS border-inline - Writing Mode

以下示例演示了具有竖排模式的 border-inline CSS 属性的用法。

<html>
<head>
<style>
   .container {
      background-color: #fed8b1;
      width: 400px;
      height: 400px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      border-radius: 15px;
      box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.6);
      writing-mode: vertical-rl;
   }
   .demo-border {
      border:4px solid black;
      border-inline: 0.9rem groove #e74c3c;
      padding: 10px;
      font-weight: bold;
      color: #333;
}
</style>
</head>
<body>
<div class="container">
<p class="demo-border">A border-inline example with vertical text.</p>
</div>
</body>
</html>