第八章 圆角样式和css渐变

一,颜色渐变

1.线性渐变(像刷油漆)

写法:background-image:linear-gradient(blue,red)
里面的参数也可以使用rgb,十六进制等形式来表示颜色
写上面的代码如下图所示,会变成这样

例1
那么问题来了,我们该如何改变渐变颜色的方向呢?
方向
看下面代码

 background-image:linear-gradient(to top,blue,red)   只需在颜色前面加to+方向

那么大家猜猜如果这样子写颜色会变成什么样子,相信很多人会觉得是蓝色在上面,红色在下面,请看下图:

例2
大家会有疑问吧!为什么是红色在上面?
注意:渐变比较特殊,代码是从后面往前读取.所以是先红色,再蓝色。

还可以用角度值来改变渐变方向
如:45deg
background-image:linear-gradient(45deg,blue,red)

如何让渐变变得明显
如果想让颜色的分界线很明显
要在颜色后面加百分比 如:

background-image:linear-gradient(to top,blue 50%,red 50%) 

例3

很神奇吧，接下来小编来教你怎么用渐变来画网格线

background-image:repeating-linear-gradient(to top,red 0,red 10px,green 10px,green 20px)

例4

大家可能不懂为什么要这样子写,给大家讲解一下渐变的原理

image.png

repeating-linear-gradient() 和 repeating-radial-gradient()。
它们的工作方式跟前两者类似，只有一点不同：色标是无限循环重复的，直到填满整个背景。
所以他们的界限要有准确的规定

例5

所以要规定明显的百分比或px值.

---

2.径向渐变

径向渐变分为圆形和椭圆形
圆形渐变写法

background-image:radial-gradient(circle,red 30%,blue 30%)(圆)

例6
方向

background-image:radial-gradient(circle at center, red 30%,blue 30%)(圆)
居中
at left top
也可以用两个像素值 分别表示x轴和y轴

注意这个的位置是用at,千万不要和线性渐变混淆了

椭圆形渐变写法:

 background-image:radial-gradient(ellipse 100px 50px at 50% 50%, red 30%,blue 30%)(椭圆)
                                              at前面的100px和50px表示椭圆的大小
这里要特别注意一下:椭圆前面一定要写大小,方向和上面等同

例8

---