线性渐变就是从一个位置开始向某个特定的方向渐变。
linear-gradient() 函数用于生成线性渐变图,可以接收多个颜色值作为参数。
如以下示例:
.line {
width: 20em;
height: 5em;
background-image: linear-gradient(to right,
red,
orange,
gold,
lightgreen,
cyan);
}
to right指的是向右渐变,也可以是其他的方向或者角度值,如to left, to top或者 45 deg , 60deg等。
色彩值后可以跟一个尺寸值或者百分比,表示该颜色停止的位置。如以下示例:
.line {
width: 20em;
height: 5em;
background-image: linear-gradient(to right,
red 10%,
lightgreen 20%,
orange 50%,
cyan 20%)
}
径向渐变是从一个位置开始向四周渐变
radial-gradient()函数用来成径向渐变图片,也是接受多个颜色值作为参数,可以参考线性渐变参数值。
效果图如下:
css代码
.radial {
margin-left: 100px;
margin-top: 100px;
width: 10em;
height: 10em;
background-image: radial-gradient(red 10%,
lightgreen 20%,
orange 50%,
cyan 20%)
}
径向渐变默认根据容器比例渐变,也在参数中传入circle来设置根据圆形渐变
如默认:
.radial {
width: 20em;
height: 10em;
background-image: radial-gradient(red 10%,
lightgreen 20%,
orange 50%,
cyan 20%)
}
设置circle后 :
.radial {
width: 20em;
height: 10em;
background-image: radial-gradient(circle,
red 10%,
lightgreen 20%,
orange 50%,
cyan 20%)
}