CSS 属性

元素的逻辑块开始边框颜色由 CSS 属性 border-block-start-color 指定；元素的书写模式、方向性和文本方向决定了实际的物理边框颜色。

根据元素的 writing-mode、direction和text-orientation提供的值，其行为对应于 border-top-color、border-right-color、border-bottom-color或border-left-color。

属性值

语法

border-block-start-color = <color> | <image-1D>

适用范围

所有 HTML 元素。

CSS border-block-start-color: 使用十六进制颜色

以下示例演示了 border-block-start-color 属性的用法，具有十六进制颜色值。

<html>
<head>
<style>
   .container {
      background-color: #098f07;
      width: 350px;
      height: 350px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 20px;
   }
   .demo-border {
      writing-mode: horizontal-tb;
      border: 8px dashed #111211;
      border-block-start-color: #e4f0e4;
      padding: 15px;
      margin: 10px;
      text-align: center;
      font-family: 'Arial', sans-serif;
      font-size: 20px;
      color: #f5f4f0;
}
</style>
</head>
<body>
<div class="container">
<p class="demo-border">带有 border-block-start-color 属性的示例。</p>
</div>
</body>
</html>

CSS border-block-start-color: 使用 RGB 颜色

以下示例演示了 border-block- start-color属性的用法使用 RGB 颜色值。

<html>
<head>
<style>
   .container {
      background-color: #098f07;
      width: 450px;
      height: 350px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 20px;
   }
   .demo-border {
      writing-mode: horizontal-tb;
      border: 8px dashed #111211;
      border-block-start-color: rgb(10, 150, 250); 
      padding: 15px;
      margin: 15px;
      text-align: center;
      font-family: 'Arial', sans-serif;
      font-size: 25px;
      color: #f5f4f0;
   }
</style>
</head>
<body>
<div class="container">
   <p class="demo-border">带有 border-block-start-color 属性的示例。</p>
</div>
</body>
</html>

CSS border-block-start-color: 使用 HSL 颜色

以下示例演示了 border-block-start-color 的用法具有 HSL 颜色值的属性。

<html>
<head>
<style>
   .container {
      background-color: #098f07;
      width: 450px;
      height: 350px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 20px;
   }
   .demo-border {
      writing-mode: horizontal-tb;
      border: 8px dashed #111211;
      border-block-start-color: hsl(120, 70%, 50%); 
      padding: 15px;
      margin: 15px;
      text-align: center;
      font-family: 'Arial', sans-serif;
      font-size: 25px;
      color: #f5f4f0;
   }
</style>
</head>
<body>
<div class="container">
   <p class="demo-border">带有 border-block-start-color 属性的示例。</p>
</div>
</body>
</html>

CSS border-block-start-color: 使用命名颜色

以下示例演示了 border-block-start-color 属性与命名颜色的用法颜色值。

<html>
<head>
<style>
   .container {
      background-color: #098f07;
      width: 450px;
      height: 350px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 20px;
   }
   .demo-border {
      writing-mode: horizontal-tb;
      border: 8px dashed #111211;
      border-block-start-color: lightgrey; 
      padding: 15px;
      margin: 15px;
      text-align: center;
      font-family: 'Arial', sans-serif;
      font-size: 25px;
      color: #f5f4f0;
   }
</style>
</head>
<body>
<div class="container">
   <p class="demo-border">带有 border-block-start-color 属性的示例。</p>
</div>
</body>
</html>

CSS border-block-start-color: 使用 RGBA 颜色

以下示例演示了在垂直书写模式下使用 border-block-start-color 属性和RGBA颜色值。

<html>
<head>
<style>
   .custom-container {
      background-color: #2c3e50;
      width: 300px;
      height: 400px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 15px;
   }
   .demo-block {
      writing-mode: vertical-rl;
      border: 6px double #3498db;
      border-block-start-color: rgba(120, 180, 50, 0.8);
      padding: 12px;
      text-align: center;
      font-family: 'Verdana', sans-serif;
      font-size: 25px;
      color: #ecf0f1;
}
</style>
</head>
<body>
<div class="custom-container">
<p class="demo-block">带有垂直文本的 border-block-start-color 属性示例。</p>
</div>
</body>
</html>