×

如何用CSS3给文字添加渐变

作者:admin2019.02.11来源:Web前端之家浏览:370评论:0
关键词:CSS3文字渐变
微信公众号

微信公众号

500.jpg

大家都知道给一个box添加渐变背景很简单,但是如何用CSS3给文字添加渐变呢,可能有些童鞋就蒙了,用图?当然不是,如果是,那就没分享的必要了,一起来学习下。

我们从零开始学习,一共分三步:

第一步: 绘制文本

.text {
text-decoration: none;
display: inline-block;
font-size: 32px;
line-height: 1;
border-radius: 4px;
padding: 16px 32px;
background: #50935D;
color: #FFF;
}

<a href="#" class="text">Web前端之家</a>

看下效果:

image.png

第二步: 使用渐变

渐变属性 分线性渐变、径向渐变、重复性线性/径向渐变

线性渐变

background: linear-gradient(to right,#79F296 40%, #27AE60 60%);

这个很熟悉吧,如下图:

image.png

背景产生了渐变效果

to right 表示渐变方向从右边开始

'#79F296'颜色占据40%, '#27AE60'颜色占据60%

径向渐变

background: radial-gradient(circle, #79F296, #27AE60);

效果如下图:

image.png

第三步: 通过背景剪裁属性 可以使文字达到渐变效果

实现方式:

.text {
text-decoration: none;
display: inline-block;
font-size: 32px;
line-height: 1;
border-radius: 4px;
padding: 16px 32px;
background: radial-gradient(circle, #79F296, #27AE60);
color: #FFF;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

当然方法不止一种呢,一起来看下另外一种方法:

.text {
text-decoration: none;
display: inline-block;
font-size: 32px;
line-height: 1;
border-radius: 4px;
padding: 16px 32px;
background: radial-gradient(circle, #79F296, #27AE60);
color: transparent;
-webkit-background-clip: text;
}

最后还是帖下完整的DEMO代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>如何用CSS3给文字添加渐变 - Web前端之家</title>
<style>
.text {
text-decoration: none;
display: inline-block;
font-size: 32px;
line-height: 1;
border-radius: 4px;
padding: 16px 32px;
background: radial-gradient(circle, #79F296, #27AE60);
color: transparent;
-webkit-background-clip: text;
}
</style>
</head>
<body>
<a href="#" class="text">Web前端之家</a>
</body>
</html>

最终效果如下图:

image.png

关于文字渐变的效果,用的CSS3,难免有兼容性问题。目前在谷歌OK,IE低版本浏览器不支持。

大家可以去尝试下,用在移动端还是不错滴

总结

其实还有其他方法的,比如用JS,记得先前分享过一篇文章:实现基于jQuery立体文字渐变特效

当然,如果大家有更好的方法,也可以分享出来,也可以加QQ群。

温馨提示:本文作者系admin ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/text28340wflsdfsd.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • 菜鸟日记

    有点东西。来学习一下~...

  • 码云笔记

    你好,前端博客-www.mybj123.com申请友链,有兴趣请联系QQ3261229068...

  • admin

    是的,新版也是不错的。...

  • Qanmy

    火狐56版本最经典。。。...

  • 前端大爆炸

    交换一下链接前端大爆炸!-WEBBANG!BANG!!BANG!!!https://a...

  • Wreb

    加群讨论...

  • 访客

    非常感谢...

  • 访客

    那如果自定义转发的图片未生成完,他给我转发的是默认截屏怎么办...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2019 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.5.2 Zero