CSS border-block-color - 易学教程，面试笔记经验！

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

根据为 writing-mode、direction和text-orientation提供的值，它对应于 border-top-color 和 border-bottom-color，或 border-right-color 和 border-left-color 属性。
边框另一个维度的颜色可以使用 border-inline-color 设置，它设置 border-inline-start-color 和 border-inline-end-color .

可能值

<color>: 边框的颜色。

语法

border-block-color = <'border-top-color'>{1,2}

适用范围

所有 HTML 元素。

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

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

<html>
<head>
<style>
   .custom-div {
      background-color: lightgreen;
      width: 350px;
      height: 250px;
   }
   .demo-border {
      border: 6px dashed orange; 
      border-block-color: purple; 
      padding: 15px;
      margin: 20px;
      color: #333;
      font-size: 18px;
   }
</style>
</head>
<body>
<div class="custom-div">
<p class="demo-border">border-block-color 属性和命名颜色值的用法。</p>
</div>
</body>
</html>

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

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

<html>
<head>
<style>
   .custom-div {
      background-color: lightblue; 
      width: 350px;
      height: 350px; 
      padding: 15px;
      margin: 20px;
   }
   .demo-border { 
      border: 8px groove blue; 
      border-block-color: #eb21b8; 
      padding: 15px;
      margin: 20px;
      color: #333;
      font-size: 18px;
}
</style>
</head>
<body>
<div class="custom-div">
<p class="demo-border">border-block-color 属性与十六进制颜色值的用法。</p>
</div>
</body>
</html>

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

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

<html>
<head>
<style>
   .custom-div {
      background-color: lightblue; 
      width: 350px;
      height: 350px; 
      padding: 15px;
      margin: 20px;
   }
   .demo-border { 
      border: 8px groove blue; 
      border-block-color: rgb(72, 168, 109); 
      padding: 15px;
      margin: 20px;
      color: #333;
      font-size: 18px;
   }
</style>
</head>
<body>
<div class="custom-div">
   <p class="demo-border">border-block-color 属性与 RGB 颜色值的用法。</p>
</div>
</body>
</html>

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

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

<html>
<head>
<style>
   .custom-div {
      background-color: lightblue; 
      width: 350px;
      height: 350px; 
      padding: 15px;
      margin: 20px;
   }
   .demo-border { 
      border: 8px groove blue; 
      border-block-color: hsl(200, 70%, 50%); 
      padding: 15px;
      margin: 20px;
      color: #333;
      font-size: 18px;
   }
</style>
</head>
<body>
<div class="custom-div">
   <p class="demo-border">border-block-color 属性和 HSL 颜色值的用法。</p>
</div>
</body>
</html>

CSS border-block-color: 使用透明

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

<html>
<head>
<style>
   .custom-div {
      background-color: lightblue; 
      width: 350px;
      height: 350px; 
      padding: 15px;
      margin: 20px;
   }
   .demo-border { 
      border: 8px groove blue; 
      border-block-color: transparent; 
      padding: 15px;
      margin: 20px;
      color: #333;
      font-size: 18px;
   }
</style>
</head>
<body>
<div class="custom-div">
   <p class="demo-border"> border-block-color 属性与透明颜色值的用法。</p>
</div>
</body>
</html>

CSS border-block-color: 书写模式

以下示例演示border-block-style 属性与垂直书写模式的使用。

<html>
<head>
<style>
   .custom-div {
      background-color: lightblue; 
      width: 350px;
      height: 350px; 
      padding: 15px;
      margin: 20px;
   }
   .demo-border {
      writing-mode: vertical-rl; 
      border: 8px groove blue; 
      border-block-color: orange red; 
      padding: 15px;
      margin: 20px;
      color: #333;
      font-size: 18px;
}
</style>
</head>
<body>
<div class="custom-div">
<p class="demo-border">border-block-style 属性与垂直书写模式的使用。</p>
</div>
</body>
</html>