如何使用 CurrentColor 设置边框的不透明度？

Question

我定制了link。我希望 border-color 依赖于 color。为此，我使用 CurrentColor.

如何制作不透明度为 0.5 的 border-bottom？

a {
  text-decoration: none;
  color: blue;
  border-bottom: 1px solid CurrentColor;
}

<a href="/">Some link</a>

我有一个解决方案，但我不确定它是否是最好的。

a {
  text-decoration: none;
  color: blue;
  background: linear-gradient(to bottom, CurrentColor, transparent 50%) 0 100% repeat-x;
  background-size: 10px 1px;
}

<a href="/">Some link</a>

此解决方案无效。

a {
  --color: blue;
  
  text-decoration: none;
  color: var(blue);
  border-bottom: 1px solid rgba(var(--color), 0.5);
}

<a href="/">Some link</a>

Answer 1

对于 CSS 个变量，您需要执行如下操作：

a {
  --color: 0,0,255;
  
  text-decoration: none;
  color: rgb(var(--color));
  border-bottom: 1px solid rgba(var(--color), 0.2);
}

<a href="/">Some link</a>

对于渐变解决方案，您可以创建两个渐变。底部的 currentColor 和顶部的背景颜色 （本例中为白色） 并调整顶部的不透明度以控制底部的不透明度:

a {
  text-decoration: none;
  color: blue;
  background-image: 
   linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)),
   linear-gradient(CurrentColor, CurrentColor);
  background-position:bottom;
  background-size:100% 1px;
  background-repeat:no-repeat;

}

<a href="/">Some link</a>

你也可以使用伪元素和不透明度：

a {
  text-decoration: none;
  color: blue;
  position:relative;
}
a:after {
  content:"";
  position:absolute;
  bottom:0;
  right:0;
  left:0;
  height:1px;
  background:currentColor;
  opacity:0.2;
}

<a href="/">Some link</a>

另一个想法是使用 box-shadow 就像我们对渐变所做的那样，有两层：

a {
  text-decoration: none;
  color: blue;
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.8),
    0 1px 0 0 currentColor;
}

<a href="/">Some link</a>

Answer 2

因为你设置了 --color: blue 而不是 rgb 颜色你必须设置 rgb 颜色..
rgba 的 a 是不透明度

a {
  --color: 1,1,1;
  
  text-decoration: none;
  color: var(--color);
  border-bottom: 1px solid rgba(var(--color), 0.2);
}

<a href="/">Some link</a>

您可以在此处将颜色转换为 rgb：https://www.rapidtables.com/convert/color/hex-to-rgb.html

如何使用 CurrentColor 设置边框的不透明度？

How to set opacity for the border with CurrentColor?

css

border

opacity

css-variables