Css 简明教程

CSS - border-inline

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

The CSS property border-inline is a shorthand property that sets the values for different logical inline border attributes, combining them into a single statement.

The writing mode, directionality, and text orientation of the element determine how the border-inline attribute is mapped to actual boundaries.
Depending on values of writing-mode, direction, and text-orientation, border-inline behaves as either border-top and border-bottom or border-right and border-left properties.
Use the border-block property, which sets both border-block-start and border-block-end, to establish borders in other dimension.

Possible values

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

The border-inline is specified with one or more of the following, in any order:

<'border-width'> - The width of the border.
<'border-style'> - The line style of the border.
<color> - The color of the border.

Constituent properties

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

This property is a shorthand for the following CSS properties:

Syntax

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

Applies to

所有 HTML 元素。

All the HTML elements.

CSS border-inline - Basic Example

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

The following example demonstrates the usage of border-inline CSS property.

<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 属性的用法。

The following example demonstrates the usage of border-inline CSS property with vertical writing mode.

<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>