线性渐变与径向渐变,挺好玩的两个属性值,不过挺复杂的,希望能捋清楚吧
1.linear-gradient
(1)基础用法
传两部分参数 方向 + 颜色(颜色可填两个以上的值),方向可为to right / top / left / bottom(默认方向)/ top right / top left / bottom right / bottom left 以及角度等
【例1】默认值为botto
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div {
width: 200px;
height: 200px;
background-image: linear-gradient(#ff7, #7f7, #77f );
}
</style>
</head>
<body>
<div></div>
</body>
</html>
【结果】
【例2】方向top right
div {
width: 200px;
height: 200px;
background-image: linear-gradient(to top right, #ff7, #7f7, #77f );
}
【例3】方向值为角度
div {
width: 200px;
height: 200px;
background-image: linear-gradient(90deg, #ff7, #7f7, #77f );
}
【结果】
(2)进阶用法
确定颜色的起止位置,在每个颜色后面添加像素参数
【例】
div {
width: 300px;
height: 100px;
background-image: linear-gradient(90deg, #ff7 50px, #7f7 150px, #77f 200px);
}
【结果】在0-50px之间颜色值为 #ff7 ,50px开始过渡直至150px为 #7f7,150px过渡至200px,200px-300px颜色值为 #77f
2.radical-gradient
径向渐变
语法规则:radial-gradient(形状 放射半径 at 圆心位置 , 颜色)
形状:circle / ellipse
放射半径:closest-corner / closest-side / farthest-corner / farthest-side
位置:(一个参数/两个参数)像素值 / 百分比 / left,right,top,bottom,center
颜色:颜色后也可添加起止位置,长度是相对于圆心计算,即放射点
【注】可以不填,但是属性值位置一定不能乱!!!
【例1】只填颜色
div {
width: 200px;
height: 200px;
background-image: radial-gradient(#fff 0px, #ff7 30px, #000 90px);
}
【结果】
【例2】添加位置
div {
width: 200px;
height: 200px;
background-image: radial-gradient(at 0px 0px, #fff, #ff7, #000);
}
【结果】
【例3】添加形状
ellipse
div {
width: 200px;
height: 200px;
background-image: radial-gradient(ellipse at 100px 50px, #fff, #ff7, #000);
}
【结果】
circle
div {
width: 200px;
height: 200px;
background-image: radial-gradient(circle at 100px 50px, #fff, #ff7, #000);
}
【结果】
【例4】添加放射半径
closest-corner
div {
width: 200px;
height: 200px;
background-image: radial-gradient(ellipse closest-corner at 80px 50px, #fff, #ff7, #000);
}
【结果】
closest-side
div {
width: 200px;
height: 200px;
background-image: radial-gradient(ellipse closest-side at 80px 50px, #fff, #ff7, #000);
}
【结果】
farthest-corner
div {
width: 200px;
height: 200px;
background-image: radial-gradient(ellipse farthest-corner at 80px 50px, #fff, #ff7, #000);
}
【结果】
farthest-side
div {
width: 200px;
height: 200px;
background-image: radial-gradient(ellipse farthest-side at 80px 50px, #fff, #ff7, #000);
}
【结果】