CSS3 实现文字渐变色

最新推荐文章于 2024-06-08 08:33:20 发布

J1ong

最新推荐文章于 2024-06-08 08:33:20 发布

阅读量4.2w

点赞数 16

文章标签： css3 html html5

本文链接：https://blog.csdn.net/weixin_41382187/article/details/91866846

版权

直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            font-size: 60px;
            background-image: linear-gradient(135deg,red,blue);
            background-clip:text;
            -webkit-background-clip:text;
            color: transparent;
        }
    </style>
</head>
<body>
    <p>
        我是渐变文字
    </p>
</body>
</html>

效果如图：

核心内容说明：

background-image属性：设置背景图片为线性渐变色，了解更多css3渐变内容点击这里

background-clip 属性：规定背景的绘制区域。(我们注意到该属性上的-webkit-，说明该属性还存在兼容问题，并不是所有浏览器都支持，在W3C是没有text这个值的，这里的text是背景被裁剪到文字)

color属性: 设置文字颜色为透明，然后面的背景色显示出来。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

J1ong

关注关注

16
点赞
踩
45

收藏

觉得还不错? 一键收藏
4
评论
CSS3 实现文字渐变色

直接上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> p{ font-size: 60px; ...
复制链接

扫一扫