CSS样式之渐变属性

CSS样式之渐变属性

目录

1.线性渐变

2.径向渐变

3.重复径向渐变

1.线性渐变background-image:linear-gradient(渐变角度，颜色1，颜色2，…… 渐变程度)

1. 颜色值

To top代表线性渐变往上走的方向，red,blue,pink……从左往右的颜色代表从底部往上走，最后一个代表渐进的多少，如图一渐进20%，占圆的20%，最后一个颜色为剩下所有。

                                                               图一

0deg代表线性渐变往上走的方向，red,blue,pink……从左往右的颜色代表从底部往上走，最后一个代表渐进的多少，如图二渐进100%，占圆的100%。

                                                     图二

1. 渐变角度

0deg（degree度一定不能省）就相当于top，具体角度如图三所示

默认的方向为to bottom/180deg如图四

                                                       图四          

2.径向渐变background-image:radial-gradient(渐变形状圆心位置，颜色1，颜色2，…… 渐变程度)

2.1渐变形状有circle，ellipse，默认为circle，渐变程度与线性渐变一样

 2.2第一个值素来定义形状的水平和垂直半径，如图五30px 80px表示水平半径为30px，垂直半径为80px。

                                                       图五

圆心位置

类似于background-position，位置有left，right，bottom，center（默认值）如图六，位置为circle at left

                                       图六

渐变程度默认为100%，如果是100%与重复径向渐变一样。如图七和图六对比。

                                         图七 

3.重复径向渐变background-image:radial-gradient(渐变形状圆心位置，颜色1，颜色2，…… 渐变程度)