|
效果图:
demo.jpg
实现方法详见代码: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<span class="word">Warren Ma 的编程小站</span>
</body>
<style>
.word { // 需要注意一下你的文字容器的大小，如果远远大于文字，那么渐变效果将会很不明显，所以推荐直接使用 span 作为容器
background: linear-gradient(60deg, #12c2e9 0%, #c471ed 100%); // 设置容器背景为渐变色
background-clip: text; // 设置容器背景的展示范围，设置成 text 之后，背景色就只会展示在文字里
-webkit-background-clip: text; // 兼容写法，建议保留
color: transparent; // 将文字颜色设置成透明，以便透过文字看到背景色
font-weight: bold; // 设置字重、无关紧要的样式
font-size: 100px; // 设置字体大小、无关紧要的样式
}
</style>
</html>
最后编辑时间为: November 30th , 2022 at 10:45 am 本文由 Warren Ma 创作，采用 知识共享署名 4.0 国际许可协议进行许可 可自由转载、引用，但需署名作者且注明文章出处
| 
发表于 2023-3-1 19:08:00
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
