渐变是多个颜色逐渐变化的效果,一般用于设置盒子模型
线性渐变
属性:background-image : linear-gradient(
渐变方向
颜色1 终点位置,
颜色2 终点位置,
......);
取值:
渐变方向:可选
- to 方位名词
- 角度度数
终点位置:可选
- 百分比
div {
width: 250px;
height: 250px;
background-color: aqua;
background-image: linear-gradient(
rgb(36, 151, 227) 80%,
red);
}
径向渐变
属性:
background-image: radial-gradient(
半径 at 圆心位置,
颜色1 终点位置,
颜色2 终点位置,
......
);
取值
- 半径可以是两条,则为椭圆型的渐变
- 圆心位置取值:像素单位数值/百分比/方位名词
div {
width: 200px;
height: 200px;
background-color: aqua;
border-radius: 50%;
background-image: radial-gradient(
100px at center center,
red,
blue);
}