一、渐变
- 渐变可以实现从一个颜色向其它颜色过渡，需要设置background-image
二、线性渐变（linear-gradient）
语法：
background-image: linear-gradient(位置, 颜色 位置, 颜色 位置...);
① 渐变的方向：
- to left
- to right
- to bottom
- to top
- deg （度数）
- turn （圈）
② 渐变可以同时指定多个颜色，多个颜色默认情况下平均分布，也可以手动指定渐变的分布情况。
③ repeating-linear-gradient()：可以平铺的线性渐变
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>线性渐变linear-gradient</title> <style> .box{ width: 200px; height: 200px; /* background-image: linear-gradient(green, red); */ /* background-image: linear-gradient(green 100px, red 150px); */ /* background-image: linear-gradient(green 20%, red 60%); */ /* background-image: repeating-linear-gradient(yellow 100px, red 150px); */ /* 方向 */ /* background-image: linear-gradient(to left, yellow, red); */ /* background-image: linear-gradient(to right, yellow, red); */ /* background-image: linear-gradient(to top, yellow, red); */ /* deg 角度 */ /* background-image: linear-gradient(50deg, yellow, red); */ /* turn 圈 */ background-image: linear-gradient(50turn, yellow, red); } </style> </head> <body> <div class="box"></div> </body> </html>
三、径向渐变（radial-gradient）
默认情况下，径向渐变的形状根据元素的形状来计算的
正方形 ——> 圆形
长方形 ——> 椭圆形
- 指定径向渐变的大小
circle（圆形）
ellipse（椭圆）
- 指定渐变位置
语法：
radial-gradient(大小 at 位置, 颜色 位置, 颜色 位置...)
大小：
circle：圆形
ellipse：椭圆
closest-side：近边
closest-corner：近角
farthest-side：远边
farthest-corner：远角
位置：
top、right、left、center、bottom
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>径向渐变radial-gradient</title> <style> .box{ width: 200px; height: 300px; /* background-image: radial-gradient(orange, skyblue); */ /* 颜色的分布位置 */ /* background-image: radial-gradient(orange 15%, rgba(0, 128, 0, 0.527) 35%, skyblue 75%); */ /* 设置起始位置开始进行渐变: - 可以使用百分数、数值 - 可以使用方位 */ /* background-image: radial-gradient(at 14% 25%, orange 15%, rgba(0, 128, 0, 0.527) 35%, skyblue 75%); */ /* background-image: radial-gradient(at top, orange 15%, rgba(0, 128, 0, 0.527) 35%, skyblue 75%); */ /* 使用大小： 圆形径向渐变 */ /* background-image: radial-gradient(circle, orange 15%, rgba(0, 128, 0, 0.527) 35%, skyblue 75%); */ /* closest-side：近边 */ /* background-image: radial-gradient(closest-side at 50px 100px, orange 15%, rgba(0, 128, 0, 0.527) 35%, skyblue 75%); */ /* closest-corner：近角 */ /* background-image: radial-gradient(closest-corner at 50px 100px, orange 15%, rgba(0, 128, 0, 0.527) 35%, skyblue 75%); */ /* farthest-side：远边 */ /* background-image: radial-gradient(farthest-side at 10px 100px, orange 15%, rgba(0, 128, 0, 0.527) 35%, skyblue 75%); */ /* farthest-corner：远角 */ background-image: radial-gradient(farthest-corner at 10px 100px, orange 15%, rgba(0, 128, 0, 0.527) 35%, skyblue 75%); } </style> </head> <body> <div class="box"></div> </body> </html>