1、linear-gradient线性渐变,语法:linear-gradient(direction,color 1,color 2...)
direction:用角度值指定渐变方向(或角度)
color:指定渐变起止颜色。
位置参数写在color之后,中间用空格隔开
用长度值或者百分比指定起止色位置。不允许负值。
to right:设置渐变从左往右。相当于90deg:
background-image: linear-gradient(to right,#f59ed1 0%,#62b5ff 100%)
to left:设置渐变从右往左。相当于270deg:
background-image: linear-gradient(to left,#f59ed1 0%,#62b5ff 100%)
to bottom:设置渐变从上到下。相当于180deg,默认值:
background-image: linear-gradient(to bottom,#f59ed1 0%,#62b5ff 100%)
to top:设置渐变从下往上。相当于0deg:
background-image: linear-gradient(to top,#f59ed1 0%,#62b5ff 100%)
多个颜色参数:
background-image: linear-gradient(to right,#f59ed1 0%,#62b5ff 50%,#4db949 100%);
2、radial-gradient径向渐变语法:radial-gradient(shape size at position,start-color,...,last-color)
shape:确定圆的类型
- ellipse (默认): 指定椭圆形的径向渐变。
- circle :指定圆形的径向渐变
size:定义渐变的大小,可能值:
- farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
- closest-side :指定径向渐变的半径长度为从圆心到离圆心最近的边
- closest-corner : 指定径向渐变的半径长度为从圆心到离圆心最近的角
- farthest-side :指定径向渐变的半径长度为从圆心到离圆心最远的边
position:定义渐变的位置。可能值:
- center(默认):设置中间为径向渐变圆心的纵坐标值。
- top:设置顶部为径向渐变圆心的纵坐标值。
- bottom:设置底部为径向渐变圆心的纵坐标值。
start-color,...,last-color:用于指定渐变的起止颜色。
圆形径向渐变:
background-image: radial-gradient(pink 20%, #8df 60%, #fff 80%);
加尺寸径向渐变:
background-image: radial-gradient(
closest-corner at 60% 55%,rgb(255, 183, 0),rgb(41, 128, 0), rgb(0, 255, 255)
);