CSS3 渐变(Gradients)

  • 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
  • 径向渐变(Radial Gradients)- 由它们的中心定义

线性渐变

默认从上到下:

background: linear-gradient(color1,color2,color3......);

从左到右(相比较默认多了个方向参数):

 background: linear-gradient(left,color1,color2,color3......); 

从左上角到右下角:

background: linear-gradient(left top,color1,color2,color3......); 

按角度渐变:

background: linear-gradient(angle,color1,color2,color3......);

百分比渐变:

background: linear-gradient(color1 20%,color2 30%,color3 50%);

重复渐变:

background: repeating-linear-gradient(color1 10%,color2 10%,color3 20%);

径向渐变

径向渐变由它的中心定义

颜色结点均匀分布(默认情况下):

background: radial-gradient(color1,color2,color3......);

颜色结点不均匀分布:

background: radial-gradient(color1 20%,color2 30%,color3 50%);

自定义形状( circle 表示圆形,ellipse 表示椭圆形 ):

background: radial-gradient(circle,color1,color2,color3......);

重复的径向渐变

background: repeating-radial-gradient(color1 10%,color2 10%, color3 15%);

注意,文字渐变需要使用:

background-image: linear-gradient(to right,color1,color2,color3......); 
-webkit-background-clip: text; 
-webkit-text-fill-color: transparent;

使用,对于兼容问题,较新版本的浏览器基本上都支持,可以添加前缀对浏览器进行支持,例如-webkit-;这里重点说明一下文字渐变IE和Edge 都不支持

转载请注明来源:开发猿 » CSS3 渐变(Gradients)

赞 (6) 打赏

觉得文章有用就打赏一下哦

支付宝扫一扫打赏

微信扫一扫打赏