渐变
通过渐变可以设置一些复杂的背景颜色,可以实现从一个颜色向其他颜色过渡的效果
渐变是图片,需要通过background-image
来设置
1、线性渐变
线性渐变,颜色沿着一条直线发生变化 linear-gradient()
# 红色在开头,黄色在结尾,中间是过渡区域
background-image: linear-gradient(red, yellow);
线性渐变的开头,我们可以指定一个渐变的方向
to left
to right
to bottom
to top
deg
表示度数turn
表示圈数
background-image: linear-gradient(to left, red, yellow);
background-image: linear-gradient(0.5turn, red, yellow);
background-image: linear-gradient(45deg, red, yellow);
渐变可以同时指定多个颜色,多个颜色默认情况下平均分布,也可以手动指定渐变的分布情况
repeating-linear-gradient()
可以平铺的线性渐变
background-image: repeating-linear-gradient(red 0px, yellow 50px);
2、径向渐变
radial-gradient()
径向渐变(放射性的效果)
background-image: radial-gradient(red, yellow);
默认情况下,径向渐变的形状根据元素的形状来计算的
- 正方形 --> 圆形
- 长方形 --> 椭圆形
我们也可以手动指定径向渐变的形状
circle
圆形ellipse
椭圆
background-image: radial-gradient(circle, red, yellow);
也可以指定渐变的位置
at top
at right
at left
at center
at bottom
at 50px 100px
指定位置
background-image: radial-gradient(at left, red, yellow);
大小
closest-side
近边farthest-side
远边closest-corner
近角farthest-corner
远角
radial-gradient(形状/大小 at 位置, 颜色 位置, 颜色 位置, 颜色 位置)
类似于线性渐变,径向渐变也有对应的repeat
属性
background-image: repeating-radial-gradient(circle at 50px 100px, red 50px, yellow 100px);