有沒有一種方法可以改變設置為從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>

您混淆了currentColor value和inherit，inherit是默認值。不要對邊框屬性使用currentColor，因為它是邊框的默認值。你只用它做背景。

#inner1和#inner2都從最近的父級繼承，該父級設置了一種顏色(紅色),默認情況下邊框使用該顏色。

不管顏色的來源(內嵌樣式屬性、外部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>

您可以使用css變量來實現類似的行為:

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

你現在可以用一種更直接的方式來實現這一點，至少在現代瀏覽器中，使用顏色混合功能。

示例:

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

看看這個:

:root {
  --color-r: 0;
  --color-g: 0;
  --color-b: 0;
  --color-a: 1;
}

[class*=-color] {
  color: rgba(var(--color-r), var(--color-g), var(--color-b), var(--color-a));
}

[class*=-background] {
  --background-r: var(--color-r);
  --background-g: var(--color-g);
  --background-b: var(--color-b);
  --background-color-a: var(--color-a);
  background-color: rgba(var(--color-r), var(--color-g), var(--color-b), var(--color-a));
}

[class*=dark] {
  --color-r: 0;
  --color-g: 0;
  --color-b: 0;
}

[class*=light] {
  --color-r: 255;
  --color-g: 255;
  --color-b: 255;
}

[class*=primary] {
  --color-r: 200;
  --color-g: 2;
  --color-b: 33;
}

[class*=secondary] {
  --color-r: 102;
  --color-g: 102;
  --color-b: 102;
}

[class*="--alpha-0"], [class*="--alpha-00"] {
  --color-a: 0;
}

[class*="--alpha-10"] {
  --color-a: .1;
}

[class*="--alpha-20"] {
  --color-a: .2;
}

[class*="--alpha-30"] {
  --color-a: .3;
}

[class*="--alpha-40"] {
  --color-a: .4;
}

[class*="--alpha-50"] {
  --color-a: .5;
}

[class*="--alpha-60"] {
  --color-a: .6;
}

[class*="--alpha-70"] {
  --color-a: .7;
}

[class*="--alpha-80"] {
  --color-a: .8;
}

[class*="--alpha-90"] {
  --color-a: .9;
}

[class*="--alpha-100"] {
  --color-a: 1;
}