Question

如何在CSS的根变量中添加线性渐变？

 :root {
--primary: linear-gradient(90deg, rgba(24,238,255,1) 0%, rgba(48,223,255,1) 100%);

}

 border: solid 1px var(--primary);

我正在尝试做类似的事情，但是它不起作用。

Answer 1

您的渐变值似乎是相同的颜色，因此在我测试时没有任何作用。

我在线性渐变中添加了辅助和主随机颜色，您可以根据需要更改它们。

要将通过:root的css应用于border，您需要使用border-image: css属性和border-image-slice作为边框

出于测试目的，我添加了border 4px solid ，并且还添加了一些填充。

要了解有关在linear gradients和border-image-slice上使用border-image的更多信息，这里是官方的MDN reference

运行下面的代码片段以查看其工作情况。

:root {
  --primary: 78, 137, 176, 1;
  --secondary: 115, 192, 85, 1;
}

p {
  border: 4px solid;
  border-image: linear-gradient(90deg, rgba(var(--secondary)) 0%, rgba(var(--primary)) 100%);
  border-image-slice: 1;
  padding: 4px;
}

<p>We can take advantage of being able to apply CSS to the and keep our markup clean!</p>

通过CSS中的：root var向边框添加线性渐变？

1 个答案: