CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡
-
线性渐变（Linear Gradients）- 向 上/下/左/右/对角进行渐变
-
径向渐变（Radial Gradients）- 向中心原点进行渐变
1.线性渐变
语法：
background-image: linear-gradient(direction, color-stop1, color-stop2, …);
direction若不填的话，则默认方向为从上往下
下面为从上往下的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box1 {
width: 200px;
height: 200px;
border: 5px solid black;
background-image: linear-gradient(pink,yellow);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
若要改变方向，可以这样设置(to left,to right,to top,to bottom )
background-image: linear-gradient(to right,pink,yellow);
对角
background-image: linear-gradient(to right bottom,pink,yellow);
也可以使用角度（angle）
background-image: linear-gradient(angle, color-stop1, color-stop2);
线性渐变角度
重复线性渐变
background-image: repeating-linear-gradient(0deg,pink 0%,yellow 50%);
2.径向渐变
语法：
background-image: radial-gradient(形状 大小 at 位置, 颜色, …,颜色);
形状它可以是值 circle 或 ellipse默认值
大小：
| 值 | 定义 |
|---|---|
| farthest-corner (默认) | 指定径向渐变的半径长度为从圆心到离圆心最远的角 |
| closest-side | 指定径向渐变的半径长度为从圆心到离圆心最近的边 |
| closest-corner | 指定径向渐变的半径长度为从圆心到离圆心最近的角 |
| farthest-side | 指定径向渐变的半径长度为从圆心到离圆心最远的边 |
位置第一个值为X，第二个值为Y
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box1 {
width: 200px;
height: 200px;
border: 5px solid black;
background-image: radial-gradient(circle farthest-corner at 50% 50%,aqua,red);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
重复径向渐变
background-image: repeating-radial-gradient(形状 大小 at 位置, 颜色, …,颜色);
background-image: repeating-radial-gradient(circle farthest-corner at 50% 50%,aqua 20%,red 30%);
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
