CSS - border-inline-end-color 属性

上一页
下一页

CSS 的 border-inline-end-color 属性指定元素的逻辑内联结束边框的颜色，然后根据书写模式、方向和文本方向将其转换为元素的物理边框颜色。

语法

border-inline-end-color: color | transparent | initial | inherit;

属性值

值 描述
color 它指定边框的颜色。可以使用不同的颜色格式（名称、rgb 值、十六进制值、hsl 值等）。默认颜色为元素的当前颜色。
transparent 它指定边框必须是透明的。
initial 这将属性设置为其默认值。
inherit 这从父元素继承属性。

CSS 内联结束边框颜色属性示例

以下示例使用不同的值说明了 border-inline-end-color 属性。

使用颜色名称的内联结束边框颜色属性。

可以使用颜色名称（例如 red、green 等）设置内联结束边框的颜色。在以下示例中，此属性使用了颜色名称。

示例

    
<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: lightcyan;
         padding: 20px;
         width: 100vh;
         height: 200px;
         display: block;
         align-items: center;
         justify-content: center;
      }

      .borders {
         border: 3px solid #e74c3c;
         padding: 20px;
         border: 3px solid red;
         border-inline-end-style: dashed;
         border-inline-end-width: 10px;
         text-align: center;
      }

      .border1 {
         border-inline-end-color: blue;
      }

      .border2 {
         border-inline-end-color: green;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-end-color property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border has border-inline-end-color
         as 'blue'.
      </p>
      <p class="borders border2">
         This border has border-inline-end-color 
         as 'green'.
      </p>
   </div>
</body>

</html>

使用十六进制值的内联结束边框颜色属性

可以使用十六进制值（例如 #cc99ff、r#6600cc 等）设置内联结束边框的颜色。在以下示例中，此属性使用了十六进制值。

示例

    
<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: lightgrey;
         padding: 20px;
         width: 100vh;
         height: 200px;
         display: block;
         align-items: center;
         justify-content: center;
      }

      .borders {
         border: 3px solid #e74c3c;
         padding: 20px;
         border: 3px solid red;
         border-inline-end-style: dashed;
         border-inline-end-width: 10px;
         text-align: center;
      }

      .border1 {
         border-inline-end-color: #99ff66;
      }

      .border2 {
         border-inline-end-color: #99ccff;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-end-color property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border has border-inline-end-color
         as '#99ff66'.
      </p>
      <p class="borders border2">
         This border has border-inline-end-color 
         as '#99ccff'.
      </p>
   </div>
</body>

</html>

使用 RGB 值的内联结束边框颜色属性

可以使用 rgb 值（例如 rgb(255, 0, 0)、rgb(128, 0, 0) 等）设置内联结束边框的颜色。在以下示例中，此属性使用了 rgb 值。

示例

    
<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: lightgreen;
         padding: 20px;
         width: 100vh;
         height: 200px;
         display: block;
         align-items: center;
         justify-content: center;
      }

      .borders {
         border: 3px solid #e74c3c;
         padding: 20px;
         border: 3px solid red;
         border-inline-end-style: dashed;
         border-inline-end-width: 10px;
         text-align: center;
      }

      .border1 {
         border-inline-end-color: rgb(102, 102, 153);
      }

      .border2 {
         border-inline-end-color: rgb(102, 102, 0);
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-end-color property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border has border-inline-end-color
         as 'rgb(102, 102, 153)'.
      </p>
      <p class="borders border2">
         This border has border-inline-end-color 
         as 'rgb(102, 102, 0)'.
      </p>
   </div>
</body>

</html>

使用 HSL 值的内联结束边框颜色属性

可以使用 hsl 值（例如 hsl(60, 100%, 70%)、hsl(330, 100%, 40%) 等）设置内联结束边框的颜色。在以下示例中，此属性使用了 hsl 值。

示例

    
<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: lightcyan;
         padding: 20px;
         width: 100vh;
         height: 200px;
         display: block;
         align-items: center;
         justify-content: center;
      }

      .borders {
         border: 3px solid #e74c3c;
         padding: 20px;
         border: 3px solid red;
         border-inline-end-style: dashed;
         border-inline-end-width: 10px;
         text-align: center;
      }

      .border1 {
         border-inline-end-color: hsl(60, 100%, 50%);
      }

      .border2 {
         border-inline-end-color: hsl(150, 100%, 15%);
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-end-color property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border has border-inline-end-color
         as 'hsl(60, 100%, 50%)'.
      </p>
      <p class="borders border2">
         This border has border-inline-end-color 
         as 'hsl(150, 100%, 15%)'.
      </p>
   </div>
</body>

</html>

使用透明值的内联结束边框颜色属性

要设置透明的内联结束边框，我们使用 transparent 值。在以下示例中，使用了 transparent 值。

示例

    
<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: lightgreen;
         padding: 20px;
         width: 100vh;
         height: 100px;
         display: block;
         align-items: center;
         justify-content: center;
      }

      .borders {
         border: 3px solid #e74c3c;
         padding: 20px;
         border: 3px solid red;
         border-inline-end-style: dashed;
         border-inline-end-width: 10px;
         text-align: center;
      }

      .border1 {
         border-inline-end-color: transparent;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-end-color property
   </h2>
   <div class="container">
      <p class="borders border1">
      This border has a transparent border-inline-end-color.
      </p>
   </div>
</body>

</html>

使用书写模式的内联结束边框颜色属性

border-inline-end-color 属性受书写模式的影响，书写模式决定了内联结束边框颜色的方向。在垂直书写模式下，它会影响底部边框颜色，而在水平书写模式下，它会影响右侧边框颜色。以下示例中显示了这些内容。

示例

    
<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: lightcyan;
         padding: 20px;
         width: 100vh;
         height: 740px;
         display: block;
         align-items: center;
         justify-content: center;
      }

      .borders {
         border: 3px solid #e74c3c;
         padding: 20px;
         border: 3px solid red;
         border-inline-end-style: dashed;
         border-inline-end-width: 10px;
         text-align: center;
      }

      .border1 {
         border-inline-end-color: darkgreen;
         writing-mode: horizontal-rl;
      }

      .border2 {
         border-inline-end-color: hsl(150, 100%, 15%);
         writing-mode: vertical-rl;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-end-color property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border has border-inline-end-color
         as 'darkgreen' with horizontal 
         writing mode.
      </p>
      <p class="borders border2">
         This border has border-inline-end-color
         as 'hsl(150, 100%, 15%)' with vertical 
         writing mode.
      </p>
   </div>
</body>

</html>

使用方向的内联结束边框颜色属性

border-inline-end-color 属性受方向的影响，方向也决定了内联结束边框颜色的方向。使用 rtl（从右到左）值时，左侧边框颜色会受到影响，而使用 ltr（从左到右）值时，右侧边框颜色会受到影响。以下示例中显示了这些内容。

示例

    
<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: lightcyan;
         padding: 20px;
         width: 100vh;
         height: 200px;
         display: block;
         align-items: center;
         justify-content: center;
      }

      .borders {
         border: 3px solid #e74c3c;
         padding: 20px;
         border: 3px solid red;
         border-inline-end-style: double;
         border-inline-end-width: 10px;
         text-align: center;
      }

      .border1 {
         border-inline-end-color: darkgreen;
         direction: rtl;
      }

      .border2 {
         border-inline-end-color: hsl(150, 100%, 15%);
         direction: ltr;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-end-color property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border has border-inline-end-color
         as 'darkgreen' with right-to-left 
         direction.
      </p>
      <p class="borders border2">
         This border has border-inline-end-color
         as 'hsl(150, 100%, 15%)' with left-to-right
         direction.
      </p>
   </div>
</body>

</html>

支持的浏览器

属性 Chrome Edge Firefox Safari Opera
border-inline-end-color 69.0 79.0 41.0 12.1 56.0
css_properties_reference.htm
打印页面
上一页
下一页
广告