Question

我自定义链接。我希望 border-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变量，您需要执行以下操作：

＆＃13;

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

＆＃13;

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

＆＃13;

对于渐变解决方案，您可以创建两个渐变。底部带有currentColor，顶部带有背景颜色（在这种情况下为白色）并调整顶部的不透明度以控制底部的不透明度：

＆＃13;

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;

}

＆＃13;

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

＆＃13;

您还可以使用伪元素和不透明度：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

因为你设置--color: blue并且它不是rgb颜色，你必须设置rgb颜色..
rgba的a是不透明度

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

2 个答案: