09前端css3渐变

 

CSS3 渐变

 

渐变就是在两个或者多个指定颜色之间平稳过度

 

1. 线性渐变linear-gradient

 

• 沿着一根轴线改变颜色

• linear-gradient属性设置线性渐变

  • 语法background :linear-gradient(angle,color-stop1,color-stop2....)默认从上到下

  • angle在不同的浏览器的角度方向变化是不一样的，angle可加可不加

  • 重复background :repeating-linear-gradient(color-stop1,color-stop2....)

 

2. 径向渐变radial-gradient

 

• 从起点到终点颜色从内到外进行圆形渐变

• radial-gradient属性设置径向渐变

  • 均匀分布background :radial-gradient(center,shape,size,start-color....stop-color)

  • 不均匀分布background :radial-gradient(color1 length|% , color2 length|%....)

  • 椭圆形background :radial-gradient(shape , color-stop1,color-stop2....)

  • 尺寸background :radial-gradient(size , color-stop1,color-stop2....)

    • size:closest-side最近边

    • size:farthest-side最远边

    • size:closest-corner最远角

    • size:farthest-corner最远角

  • 重复background :repeating-radial-gradient(color1 length|% , color2 length|%....)