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

Question

我自定义链接。我希望边框颜色取决于color。为此，我使用 CurrentColor。

\n\n

如何使不透明度为0.5的边框底部？

\n\n

\r\n

\r\n

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

\r\n

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

\r\n

\r\n

\r\n

\n\n

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

\n\n

\r\n

\r\n

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

\r\n

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

\r\n

\r\n

\r\n

\n\n

此解决方案不起作用\xe2\x80\x99。

\n\n

\r\n

\r\n

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

\r\n

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

\r\n

\r\n

\r\n

\n

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>