现在css3越来月流行了,为了实现一些高大上的效果,我们会用一些渐变的特效,请看文字渐变的特效代码:

  .title {
font-size: 60px;
line-height: 80px;
text-align: center;
margin-top: 15%;
-webkit-background-clip: text;
background: linear-gradient(to right, red, blue);
color: transparent;
}

  

  <div class="title">
Welcome to our website
</div>

运行一下,发现没有效果,是不是很奇怪

这个时候我们要改变一下属性的顺序:

.title {
font-size: 60px;
line-height: 80px;
text-align: center;
margin-top: 15%;
background: linear-gradient(to right, red, blue);
-webkit-background-clip: text; /*这个属性只能放在background属性的后面*/
color: transparent;
}

再运行一下,是不是很神奇的事情发生了,文字渐变出现了

css3文字渐变无效果的解决方案的更多相关文章

  1. CSS3 文字渐变动画

    背景剪裁 语法:background-clip: border-box || padding-box || context-box || no-clip || text 本次用到的就是: -webki ...

  2. Css3 文字渐变整理(一)

    一.文本颜色渐变 <gradient> :可以应用在所有接受图像的属性上,允许使用简单的语法实现颜色渐变,以便UA在渲染页面自动生成图像. 语法:<gradient> = li ...

  3. css3 文字轮番滚动效果2——改进版

    1.优化了之前的代码: 2.修正了先前按照文字的条目的数量计算速度的问题,现在改为按照字符的个数计算动画执行一次需要的时间,更为精确: 3.增添了每一行JS代码的注释. 4.这个案例的用途一般为告警信 ...

  4. Struts2添加了<s:debug>后页面无效果的解决方案

    一.环境 Struts2版本 struts2.5 二.问题 在jsp页面中添加了<s:debug>后页面上无任何展示. 三.解决 在struts.xml中的struts节点下添加如下常量即 ...

  5. css3.0新属性效果在ie下的解决方案(兼容性)

    css3.0增加的新属性,如投影.渐变.旋转.圆角等等!这些新标准属性在ie6.ie7.ie8浏览器版本里得不到很好的支持,相信ie以后的新版本也会支持这些新属性的.目前ie6.ie7.ie8浏览器不 ...

  6. CSS3实现文字扫光效果

    本篇文章由:http://xinpure.com/css3-text-light-sweep-effect/ CSS3 实现的文字扫光效果,几乎可以和 Flash 相媲美了 效果解析 我们分析一下实现 ...

  7. CSS3实现文字折纸效果

    CSS3实现文字折纸效果 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <title></tit ...

  8. 利用css3的text-shadow属性实现文字阴影乳白效果

    现在CSS3+html5的网页应用的越来越广泛了.很多网页中的字体同样可以用CSS3来实现炫酷的效果. 下面就介绍一下利用css3的text-shadow属性实现文字阴影乳白效果.这是在设计达人上面看 ...

  9. CSS3文字阴影实现乳白文字效果

    CSS3文字阴影实现乳白文字效果是一款有效利用css3的text-shadow属性,可以实现很多漂亮的效果,CSS3 文字阴影 文字特效,字体效果. 源码下载:http://www.huiyi8.co ...

随机推荐

  1. Codeforces Round #214 (Div. 2) C. Dima and Salad 背包

    C. Dima and Salad   Dima, Inna and Seryozha have gathered in a room. That's right, someone's got to ...

  2. 【bzoj4034】[HAOI2015]T2

    siz[v]表示以v为根的子树的节点数 top[v]表示v所在的重链的顶端节点 fa[v]表示v的父亲 pos[v]表示v的父边标号 mx[v]表示v的子树中边的标号最大的那条边 参考:http:// ...

  3. commons-fileupload 组件实现文件上传

    index.jsp 核心代码: //创建文件项工厂 DiskFileItemFactory factory = new DiskFileItemFactory(); //创建解析请求 数据的Servl ...

  4. HDU5806 NanoApe Loves Sequence Ⅱ

    NanoApe Loves Sequence Ⅱ Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 262144/131072 K (Ja ...

  5. bzoj 1641: [Usaco2007 Nov]Cow Hurdles 奶牛跨栏【Floyd】

    先跑一遍取max版的Floyd,直接用数组回答询问即可 #include<iostream> #include<cstdio> using namespace std; con ...

  6. ZOJ-3960 What Kind of Friends Are You?

    What Kind of Friends Are You? Time Limit: 1 Second      Memory Limit: 65536 KB Japari Park is a larg ...

  7. map Codeforces Round #Pi (Div. 2) C. Geometric Progression

    题目传送门 /* 题意:问选出3个数成等比数列有多少种选法 map:c1记录是第二个数或第三个数的选法,c2表示所有数字出现的次数.别人的代码很短,思维巧妙 */ /***************** ...

  8. redis在linux环境下的安装与启动

    定义 redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorted s ...

  9. 初窥Android Studio

    Android Studio 是一个Android集成开发工具,基于IntelliJ IDEA. 类似 Eclipse ADT,Android Studio 提供了集成的 Android 开发工具用于 ...

  10. [转]ASP.NET MVC HtmlHelper扩展之Calendar日期时间选择

    本文转自:http://blog.bossma.cn/asp_net_mvc/asp-net-mvc-htmlhelper-calendar-datetime-select/ 这里我们扩展HtmlHe ...