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

星期五

明天不上班

 
 
 

日志

 
 
关于我

一个特立独行的Java程序员,比较宅,上上网,写博客,听音乐,看电影。

网易考拉推荐

CSS3 渐变  

2014-07-21 18:28:25|  分类: Css |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
CSS3 分为 线性渐变和径向渐变

线性渐变 linear-gradient
线性渐变格式 linear-gradient([<起点> || <角度>,] <点>, <点>…)
只能用在背景上
兼容IE的写法
IE filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ff0000',GradientType='1');
IE支持比较简单,两个颜色start,end 两个方向,GradientType 0和1

参数
起点:从什么方向开始渐变 默认:top   left、top、left top
角度:从什么角度开始渐变 xxx deg的形式
点:渐变点的颜色和位置 black 50%,位置可选

最简单
 linear-gradient(red, green) 
起点位置 
 linear-gradient(left top, red, green)
 linear-gradient(30deg, red, green, blue) 
角度是逆时针方向旋转

repeating-linear-gradient

加入点的位置
linear-gradient(top, red 40%, green 60%)
linear-gradient(top, red 50%, green 50%)

同一个位置两个点——直接跳变,也可以用px
linear-gradient(60deg, green 0, green 10px, #fff 10px, #fff 20px);

配合rgba
linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0))

加入背景图片 (CSS3背景允许多张背景)
background: linear-gradient (top, rgba(255,255,255,1) 30%, rgba(255,255,255,0)), url(a.gif)

实例: 在chrome上运行

径向渐变radial-gradient

radial-gradient([<起点>]? [<形状> || <大小>,]? <点>, <点>…);
起点:可以是关键字(left,top,right,bottom),具体数值 或 百分比
形状:ellipse、circle
大小:  具体数值或百分比,也可以是关键字(最近端,最近角,最远端,最远角,包含或覆盖 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover));
注意 firefox目前只支持关键字

实例:在Chrome上运行


  评论这张
 
阅读(393)| 评论(0)
推荐

历史上的今天

评论

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

页脚

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