注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

CSS3阶段汇总1 基本功能——文字渐变  

2014-04-02 21:43:21|  分类: CSS3属性 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
实现如下文字的渐变效果:
文字渐变 - 我的左手旁边就是你~ - 我的左手旁边就是你的右手
第一:我们先把渐变颜色实现出来。
文字渐变 - 我的左手旁边就是你~ - 我的左手旁边就是你的右手
第二:然后我们可以想到,如果把文字放在上面,效果不久出来了?但是一点必须知道的是,文字放上去你没有透明怎么能显示出来呢?
【color:transparent; /*让文字的背景透明,才能显示渐变的效果*/
-webkit-background-clip:text;】当未添加这两局的代码效果如下
 文字渐变 - 我的左手旁边就是你~ - 我的左手旁边就是你的右手
 加上那两句代码就实现了效果。第一我们的文字默认是黑色的,我们要把它的颜色设置成透明,这样才能显示出他的背景颜色;第二我们只要在文字区域显示背景渐变,所以才要加入 -webkit-background-clip:text;(意思是在哪里显示,有border,padding,content值)
具体代码如下

<!DOCTYPE>
<html>
<head>
<meta charset='utf-8'>
<title> 文字渐变效果</title>
<style type='text/css'>
.con {
height: 500px;
width: 500px; 

color:transparent; /*让文字的背景透明,才能显示渐变的效果*/
background:-webkit-linear-gradient(left,#f00,#ff0 25%,#0f0 40%,#0ff 55%,#00f 70%,#f00);
-webkit-background-clip:text;/*只有webkit内核支持text的剪切模式 ,简单的理解就是文字的地方才显示颜色,不是文字区域的不显示颜色*/
}
</style>
</head>

<body>
<div class='wrap'>
<div class='con'>小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈小陈</div>
</div>
</body>
</html>



 欢迎学习交流——梦幻雪冰独行冰海@font-face中iefix的详解 - 梦幻雪冰 - 梦幻雪冰
HTML5学堂贴吧——HTML5学堂
HTML5学堂微博——HTML5学堂
 

  评论这张
 
阅读(135)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017