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

Question

可以在 CSS/Sass?

中为文本添加 渐变边框 没有 SVG

谢谢:)

Answer 1

这是一种实现方式，您知道它可以与 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>

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

How to add gradient border to a text in css (or scss/sass)

css

text

gradient

sass