Css3 文字渐变整理
Posted tianma3798
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Css3 文字渐变整理相关的知识,希望对你有一定的参考价值。
一、文本颜色渐变
<gradient> :可以应用在所有接受图像的属性上,允许使用简单的语法实现颜色渐变,以便UA在渲染页面自动生成图像。
语法:<gradient> = linear-gradient() | repeating-linear-gradient() | radial-gradient() | repeating-radial-gradient()
注意:必需在一个有尺寸的盒子里生成。如果盒子没有尺寸,渐变效果则无法呈现。
可以作用在能接受图像的任意属性上:
background-image: -webkit-gradient(linear, left 0, right 0, from(rgb(4, 94, 170)), to(rgb(1, 152, 216))); list-style-image: -webkit-gradient(linear, left 0, right 0, from(rgb(4, 94, 170)), to(rgb(1, 152, 216)));
文字颜色渐变比较麻烦,并且兼容性差强人意:
background-image: -webkit-gradient(linear, left 0, right 0, from(rgb(4, 94, 170)), to(rgb(1, 152, 216))); -webkit-background-clip: text; /*必需加前缀 -webkit- 才支持这个text值 */ -webkit-text-fill-color: transparent; /*text-fill-color会覆盖color所定义的字体颜色: */
兼容性:
text-fill-color,IE果然又不兼容。移动端UC浏览器也不兼容。
-webkit-background-clip: text; 非正式属性,目前(2017-07-07)仅仅FF、Chrome、Safari支持,并且必须带前缀。
二、代码示例
<view class="demo">css字体文字渐变,css字体文字渐变</view>
.demo width: 500px; height: 200px; margin: 50px auto; font-size: 20px; background-image: -webkit-gradient(linear, left 0, right 0, from(rgb(166, 4, 249)), to(rgb(251, 223, 11))); /*必需加前缀 -webkit- 才支持这个text值 */ -webkit-background-clip: text; /*text-fill-color会覆盖color所定义的字体颜色: */ -webkit-text-fill-color: transparent;
显示结果:
更多:
以上是关于Css3 文字渐变整理的主要内容,如果未能解决你的问题,请参考以下文章