一,颜色渐变
1.线性渐变(像刷油漆)
例1写法:background-image:linear-gradient(blue,red)
里面的参数也可以使用rgb,十六进制等形式来表示颜色
写上面的代码如下图所示,会变成这样
那么问题来了,我们该如何改变渐变颜色的方向呢?
方向
看下面代码
background-image:linear-gradient(to top,blue,red) 只需在颜色前面加to+方向
那么大家猜猜如果这样子写颜色会变成什么样子,相信很多人会觉得是蓝色在上面,红色在下面,请看下图:
大家会有疑问吧!为什么是红色在上面?
注意:渐变比较特殊,代码是从后面往前读取.所以是先红色,再蓝色。
还可以用角度值来改变渐变方向
如: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.径向渐变
径向渐变分为圆形和椭圆形
圆形渐变写法
例6background-image:radial-gradient(circle,red 30%,blue 30%)(圆)
方向
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
网友评论