具有不透明度的currentColor

Question

有没有一种方法可以更改设置为从其继承颜色的边框的不透明度currentColor？即继承currentColor中#inner2，并设置它的不透明0.25。

请寻找一个纯粹的css解决方案。

例如，类似于以下内容的内容：

#outer{
  color: rgba(255,0,0,1);
}

.inner{
  display: block;
  width: 100%;
  height: 10px;
  margin-bottom: 5px;
  border: 2px solid currentColor;
}

#inner2{
  /* This is where I want to inherit current color */
  /* ... but still set it to 0.25 opacity */
  border-color: rgba(255,0,0,0.25);
}

<div id='outer'>
  <div id='inner1' class='inner'></div>
  <div id='inner2' class='inner'></div>
</div>

Answer 1

您可以使用 css-variables 来实现类似的行为：

#outer{
  --border-r: 255;
  --border-g: 0;
  --border-b: 0;
  color: rgba(var(--border-r),var(--border-g),var(--border-b),1);
}

.inner{
  display: block;
  width: 100%;
  height: 10px;
  margin-bottom: 5px;
  border: 2px solid;
}

#inner2{
  color: rgba(var(--border-r),var(--border-g),var(--border-b),0.25);
}

<div id='outer'>
  <div id='inner1' class='inner'></div>
  <div id='inner2' class='inner'></div>
</div>

Answer 2

你混淆了currentColor价值与inherit它是默认的。您不使用currentColor边框属性，因为它是边框的默认值。您仅将其用于background.

#inner1并且#inner2都继承自最近的父级，它的颜色设置为（红色）并且边框默认使用该颜色。

无论颜色的来源如何
（内联style属性、外部 CSS 或远祖继承），以下解决方案将在 100% 的时间内有效：

#outer{ color:red; }
#inner1, #inner2{ 
    padding: 2em; 
    margin-top: 1em;  
}
#inner1{ border:5px solid; } 

#inner2{ position:relative; }

#inner2::before{  
  content:'';
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  border:5px solid;
  opacity:.5;
}

<div id='outer'>
  <div id='inner1'>inner 1</div>
  <div id='inner2'>inner 2</div>
</div>

Answer 3

现在，您可以使用该函数以更直接的方式（至少在现代浏览器中）实现此目的color-mix。

例子：

#outer {
  color: rgba(255,0,0,1);
}

.inner {
  display: block;
  width: 100%;
  height: 10px;
  margin-bottom: 5px;
  border: 2px solid currentColor;
}

#inner2 {
  border-color: color-mix(in srgb, currentColor 25%, transparent);
}

<div id='outer'>
  <div id='inner1' class='inner'></div>
  <div id='inner2' class='inner'></div>
</div>

您可以选择颜色空间（我在这里为您选择了 SRGB）以及混合比例。如果省略该比例，则默认为 50%。

但请注意，如果当前颜色已经部分透明，这将使其更加透明；这不会取代Alpha 通道。为此，我们需要等待相对颜色（CSS Color Level 5 的另一部分）。