- 线性渐变
background-image: linear-gradient(方向, 起始颜色, 终止颜色);
background-image: linear-gradient(to right, yellow, green);
方向可以是:to left
、to right
、to top
、to bottom
、角度30deg
(指的是顺时针方向30°)
2. 径向渐变
background-image: radial-gradient(辐射的半径大小 at 中心的位置, 起始颜色, 终止颜色);
background-image: radial-gradient(100px at center,yellow ,green);
中心点的位置可以是:at left
right
center
bottom
top
。如果以像素为单位,则中心点参照的是盒子的左上角
注:
/*如果辐射半径的宽高不同,那就是椭圆*/
div:nth-child(5) {
background-image: radial-gradient(100px 50px at center, yellow, green);
}
- 重复渐变
语法:
background-image:repeating-linear-gradient();
标签:right,gradient,渐变,yellow,background,线性,image,径向
From: https://blog.csdn.net/2301_81247606/article/details/142795733