.text-gradient {
display: inline-block;
color: green;
font-size: 10em;
font-family: ´微软雅黑´;
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;
};

由于目前text-fill-color属性貌似就webkit核心的浏览器支持,所以两个demo页面只能在Chrome浏览器或是Safari浏览器下才能看到渐变效果。Firefox浏览器下纯色,IE下就更不用说了。

css—文字渐变色的更多相关文章

  1. 奇思妙想 CSS 文字动画

    之前有些过两篇关于字体的文章,是关于如何定义字体的: 你该知道的字体 font-family Web 字体 font-family 再探秘 本文将会和这篇 -- CSS 奇思妙想边框动画类似,讲一些文 ...

  2. css文字两端对齐

    css文字两端对齐 text-align:Justify(火狐); text-justify:inter-ideograph(IE) text-justify(IE) 基本语法 text-justif ...

  3. html,CSS文字大小单位px、em、pt的关系换算

    html,CSS文字大小单位px.em.pt的关系换算 这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与 ...

  4. CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现?

    DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...

  5. <转载>使CSS文字图片div元素居中方法之水平居中的几个方法

    文字居中,文字垂直居中水平居中,图片居中,图片水平居中垂直居中,块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的.情 况有很多种,不同的情况又有不同的解决方式.水平居中的方式解决 ...

  6. CSS文字垂直居中的一些问题

    说到CSS文字垂直居中,很多初学者都喜欢用调整行高等于div高度的方式来达到效果, div { height:30px; line-height:30px; } 但其实这么做会遇到一个问题:多行文本溢 ...

  7. CSS文字过多显示省略号

    CSS文字过多显示省略号 /*-webkit-line-clamp用来限制在一个块元素显示的文本的行数*/ .dot1{ width: 100%; display: -webkit-box; -web ...

  8. CSS文字大小单位px、em、pt详解

    这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用p ...

  9. css文字超出自动显示省略号

    只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...

随机推荐

  1. [luogu2825 HEOI2016/TJOI2016] 游戏 (二分图最大匹配)

    传送门 Description 在2016年,佳缘姐姐喜欢上了一款游戏,叫做泡泡堂.简单的说,这个游戏就是在一张地图上放上若干个炸弹,看是否能炸到对手,或者躲开对手的炸弹.在玩游戏的过程中,小H想到了 ...

  2. Linux思维导图之sed、实战习题

    命令解释: ◆sed 2p /etc/passwd第二行打印了两次其余一次 ◆sed-n '2p' /etc/passwd 只打印出第二行 ◆sed-n 1,4p' /etc/passwd 只打印出1 ...

  3. 亚马逊免费服务器搭建Discuz!论坛过程(二)

    1:  登录服务器 在实例页面,点击连接连接,按照如下步骤,即可登录服务器. 登录成功之后,如下所示.你就可以随意玩耍了. 2: 系统优化 证书登录当然安全,但是不太方便并且麻烦,本人还是习惯用户名密 ...

  4. Python语言认识和实用工具(1)

    目录 1. Python语言概述 2. Python使用注意事项 3. Python学习工具 1. Python语言概述   Python是一种计算机程序设计语言.是一种动态的.面向对象的脚本语言,语 ...

  5. mongodb--作为windows服务启动

    注意需要以管理员权限运行CMD

  6. 阶梯博弈&POJ 1704

    阶梯博弈: 先借用别人的一幅图片.(1阶梯之前还有一个0阶梯未画出) 阶梯博弈的最初定义是这样的:每一个阶梯只能向它的前一个阶梯移动本阶梯的点,直至最后无法移动的为输. 那么,利用NIM,只计算奇数级 ...

  7. 你真懂JavaScript吗?

    正文 题目1: if (!("a" in window)) { var a = 1; } alert(a); 题目2 var a = 1, b = function a(x) { ...

  8. HDU 5355 Cake

    HDU 5355 Cake 更新后的代码: 今天又一次做这道题的时候想了非常多种思路 最后最终想出了自觉得完美的思路,结果却超时 真的是感觉自己没救了 最后加了记忆化搜索,AC了 好了先说下思路吧.不 ...

  9. Ural 1167 Bicolored Horses (DP)

    题目地址:Ural 1167 感觉这题的思路类似于背包的做法. . 先预处理出来每一个马与之前全部的马的0的数量和1的数量,用数组a[0][i]和a[1][i]来表示. 然后再用数组dp[i][j]来 ...

  10. 【待解决】创建maven web工程报错

    报错信息如下: Could not calculate build plan: Plugin org.apache.maven.plugins:maven-resources-plugin:2.6 o ...