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

Question

我自定义链接。我希望 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>