失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > CSS3 实现文字渐变色

CSS3 实现文字渐变色

时间:2019-01-28 10:15:12

相关推荐

CSS3 实现文字渐变色

直接上代码:

<!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属性: 设置文字颜色为透明,然后面的背景色显示出来。

如果觉得《CSS3 实现文字渐变色》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。