CSS3 渐变

渐变

• 指的是从一种颜色慢慢过渡到另外一种颜色
• 渐变必须加前缀。-webkit- -moz-
• 渐变只能用在background上面

渐变的语法结构

• 线性渐变的格式:

  • background: -webkit-linear-gradient( [<起点> ||<角度>],点,点...)

• IE(IE9 以下)

  • filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ffffff’,endColorstr=’#ff0000’,GradientType=’1’);

• 参数

  • 起点:从什么方向开始渐变,默认:top
  • left,top,left top,right,right top,等等
  • 角度: 从什么角度开始渐变
  • xxx deg的形式(正数表示逆时针旋转。可以拿0deg最对比)

• 点: 渐变的颜色和位置

  • black 50%位置可选

线性渐变实例

• 最简单
• red ,green
• 从上到下

  .box2{width:100px;height:100px;border:1px solid #ccc;background:-webkit-linear-gradient(red,green);}

• 起点位置
  • left top , red , green
  • 30deg ,red, green
    • 逆时针为正

 .box1{width:100px;height:100px;border:1px solid #ccc;background:-webkit-linear-gradient(left top,red 20px,blue 40px);} 
  .box4{width:100px;height:100px;border:1px solid #ccc;background:-webkit-linear-gradient(30deg,red 20%,green 50%);}

• repeating-linear-gradient :表示重复渐变

 .box3{width:100px;height:100px;border:1px solid #ccc;background:-webkit-repeating-linear-gradient(30deg,red 30px,green 50px);}

• 也可以配合rgba
• top,rgba(255,255,255,1) ,rgba(255,255,255,0)
• 加入背景图片
• background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 0)), url(a.gif) no-repeat

简单例子鼠标放上去出现类似滚动的特效

效果图

渐变.gif

线性渐变---IE兼容

径向渐变(了解就好)

• radial-gradient(<起点>||<角度>,<形状>,点1,点2,....)
• 起点:可以是关键字(left,top,right,bottom),具体数值或百分比
• 形状 ellipse,circle
• 大小:具体数值或百分比也可以是关键字(最近端,最近角,最远端,最远角,包含或者覆盖)
• (closest-side,closest-corner,fathest-sice,farthest-corner,contain or cover)
• 特别注意火狐目前只支持关键字