css3文字渐变无效果的解决方案
现在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文字渐变无效果的解决方案的更多相关文章
- CSS3 文字渐变动画
背景剪裁 语法:background-clip: border-box || padding-box || context-box || no-clip || text 本次用到的就是: -webki ...
- Css3 文字渐变整理(一)
一.文本颜色渐变 <gradient> :可以应用在所有接受图像的属性上,允许使用简单的语法实现颜色渐变,以便UA在渲染页面自动生成图像. 语法:<gradient> = li ...
- css3 文字轮番滚动效果2——改进版
1.优化了之前的代码: 2.修正了先前按照文字的条目的数量计算速度的问题,现在改为按照字符的个数计算动画执行一次需要的时间,更为精确: 3.增添了每一行JS代码的注释. 4.这个案例的用途一般为告警信 ...
- Struts2添加了<s:debug>后页面无效果的解决方案
一.环境 Struts2版本 struts2.5 二.问题 在jsp页面中添加了<s:debug>后页面上无任何展示. 三.解决 在struts.xml中的struts节点下添加如下常量即 ...
- css3.0新属性效果在ie下的解决方案(兼容性)
css3.0增加的新属性,如投影.渐变.旋转.圆角等等!这些新标准属性在ie6.ie7.ie8浏览器版本里得不到很好的支持,相信ie以后的新版本也会支持这些新属性的.目前ie6.ie7.ie8浏览器不 ...
- CSS3实现文字扫光效果
本篇文章由:http://xinpure.com/css3-text-light-sweep-effect/ CSS3 实现的文字扫光效果,几乎可以和 Flash 相媲美了 效果解析 我们分析一下实现 ...
- CSS3实现文字折纸效果
CSS3实现文字折纸效果 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <title></tit ...
- 利用css3的text-shadow属性实现文字阴影乳白效果
现在CSS3+html5的网页应用的越来越广泛了.很多网页中的字体同样可以用CSS3来实现炫酷的效果. 下面就介绍一下利用css3的text-shadow属性实现文字阴影乳白效果.这是在设计达人上面看 ...
- CSS3文字阴影实现乳白文字效果
CSS3文字阴影实现乳白文字效果是一款有效利用css3的text-shadow属性,可以实现很多漂亮的效果,CSS3 文字阴影 文字特效,字体效果. 源码下载:http://www.huiyi8.co ...
随机推荐
- 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 ...
- 【bzoj4034】[HAOI2015]T2
siz[v]表示以v为根的子树的节点数 top[v]表示v所在的重链的顶端节点 fa[v]表示v的父亲 pos[v]表示v的父边标号 mx[v]表示v的子树中边的标号最大的那条边 参考:http:// ...
- commons-fileupload 组件实现文件上传
index.jsp 核心代码: //创建文件项工厂 DiskFileItemFactory factory = new DiskFileItemFactory(); //创建解析请求 数据的Servl ...
- HDU5806 NanoApe Loves Sequence Ⅱ
NanoApe Loves Sequence Ⅱ Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 262144/131072 K (Ja ...
- bzoj 1641: [Usaco2007 Nov]Cow Hurdles 奶牛跨栏【Floyd】
先跑一遍取max版的Floyd,直接用数组回答询问即可 #include<iostream> #include<cstdio> using namespace std; con ...
- 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 ...
- map Codeforces Round #Pi (Div. 2) C. Geometric Progression
题目传送门 /* 题意:问选出3个数成等比数列有多少种选法 map:c1记录是第二个数或第三个数的选法,c2表示所有数字出现的次数.别人的代码很短,思维巧妙 */ /***************** ...
- redis在linux环境下的安装与启动
定义 redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorted s ...
- 初窥Android Studio
Android Studio 是一个Android集成开发工具,基于IntelliJ IDEA. 类似 Eclipse ADT,Android Studio 提供了集成的 Android 开发工具用于 ...
- [转]ASP.NET MVC HtmlHelper扩展之Calendar日期时间选择
本文转自:http://blog.bossma.cn/asp_net_mvc/asp-net-mvc-htmlhelper-calendar-datetime-select/ 这里我们扩展HtmlHe ...