最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
CSS3中简单的文字渐变效果例子
时间：2022-06-25 11:08:03 编辑：袖梨 来源：一聚教程网
方法一：
| 代码如下 | 复制代码 |
|
.gradient-text1{display:inline-block;position:relative;font:10em 'microsoft yahei';} .gradient-text1[data-text]::after{content:attr(data-text);z-index:1;position:absolute;left:0;color:red;-webkit-mask-image:-webkit-gradient(linear,0 0,0 bottom,from(#ff0000),to(rgba(0,0,255,0)));}
xiaoxiehang
|
|
从CSS代码可以看出，效果的实现除了“content内容生成技术”以外，主要是使用了mask-image属性，内容则是“webkit核心浏览器下的渐变”了。
方法二：
| 代码如下 | 复制代码 |
|
.gradient-text2{display:inline-block;position:relative;font:10em 'microsoft yahei';background-image:-webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51, 51, 51, 1)));-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
xiaoxiehang
|
|
此方法虽然使用的CSS属性相对多些，但是结构简单，易于控制，颜色的选取与控制也更精确，理解上也更容易理解。
相关文章
- qq邮箱网页版扫码快捷登录-qq邮箱网页版文件中转站直达 02-12
- 星火英语估分入口-星火英语估分器使用指南 02-12
- 樱花动漫APP下载安装最新版本-樱花动漫官方正版APP下载入口 02-12
- 微博网页版入口-微博官网最新在线浏览地址 02-12
- poipiku官网登录入口2026-poipiku官方最新登录地址首页 02-12
- byrut游戏网站怎么进-byrut俄罗斯游戏网站进入教程 02-12