码迷,mamicode.com
首页 > Web开发 > 详细

Css3 文字渐变整理(一)

时间:2019-07-10 18:31:07      阅读:163      评论:0      收藏:0      [点我收藏+]

标签:nbsp   自动生成   gradient   webkit   20px   htm   浏览器   ima   div   

 

一、文本颜色渐变

<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渐变(Gradients)-径向渐变

CSS3渐变(Gradients)-线性渐变

Css3渐变实例Demo(一)

Css3 文字渐变整理(一)

标签:nbsp   自动生成   gradient   webkit   20px   htm   浏览器   ima   div   

原文地址:https://www.cnblogs.com/tianma3798/p/11165526.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!