如何在css（或scss / sass）中为文本添加渐变边框

It is possible to add gradient border to a text without SVG in CSS/Sass?

可以在CSS / Sass中为没有SVG的文本添加渐变边框吗？

Thanks :)

谢谢 ：）

1 个解决方案

#1

This is a way to do it, you realize that it works with webkit and that kills the compatibility with browsers that are not modern.

这是一种方法，您意识到它适用于webkit并且会破坏与非现代浏览器的兼容性。

body { padding: 50px; }

h1 {
    font: 100px sans-serif;
    font-weight: bold;
    
    /* Warning: no fallback */
    background: -webkit-linear-gradient(top, red, blue);
    -webkit-background-clip: text;
    -webkit-text-stroke: 4px transparent;
    color: white; /* same as background */
}

<h1>CSS</h1>