html - 不透明的当前颜色

Question

是否有一种方法可以更改设置为从 currentColor 继承其颜色的边框的不透明度？即继承 #inner2 中的 currentColor 并将其不透明度设置为 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

您将 currentColor 值与 inherit 混淆了，后者是默认值。您不使用 currentColor 作为边框属性，因为它是边框的默认值。你只将它用于背景。

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

另请参阅我的 other answer here它使用最先进的语法。