CSS基础之渐变

渐变

1.线性渐变：多种颜色从一个方向到另外一个方向

注意：线性渐变如果加了浏览器的前缀，不加to，方向写的是起点；

不加浏览器的前缀，要加to，方向写的是重点，就只能运行在特定浏览器，针对浏览器实现效果不同

background: linear-gradient(to right,red ,green, blue);

2.径向渐变：让多种颜色向四周渐变

方式一：借助于方位词

方式二：借助于坐标，左上角为原点

注意：不加起点：默认中心，前缀可以不加；写了起点：必须加前缀，如果不加前缀，可能会导致效果出不来或者效果显示错误

1）径向渐变形状： 在长方形盒子中，渐变的形状默认是椭圆（圆形、椭圆两种效果）

在正方形盒子中，渐变的形状默认是圆型（只能显示出圆形）

更改形状，把形状单词写在颜色值之前即可

cricle=======圆

ellipsis=====椭圆

2）径向渐变的大小

closest-side：最近边

farthest-side：最远边

closest-corner：最近角

farthest-corner：最远边

3）重复性渐变

线性渐变：

background：repeating-linear-gradient（to right，red 0%，blue 20%，green 40%）；

径向渐变：

background：-webkit-repeating-radial-gradient（center，red 0%，green 20%，blue 50%）；