CSS 渐变可让您显示两个或多个指定颜色之间的平滑过渡。
CSS 定义了三种类型的渐变:
线性渐变(下/上/左/右/对角线)
径向渐变(由中心定义)
圆锥曲线渐变(围绕中心点旋转)
要创建线性渐变,您必须定义 至少两个色标。色标是您想要呈现平滑过渡的颜色 之中。您还可以设置起点和沿线的方向(或角度) 带有渐变效果。
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
方向 - 从上到下(这是默认值)
以下示例显示了从顶部开始的线性渐变。它从红色开始,逐渐变为黄色:
#grad {
background-image: linear-gradient(red, yellow);
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(red, yellow);
}
</style>
</head>
<body>
<h1>Linear Gradient - Top to Bottom</h1>
<p>This linear gradient starts red at the top, transitioning to yellow at the bottom:</p>
<div id="grad1"></div>
</body>
</html>
方向 - 从左到右
以下示例显示了从左侧开始的线性渐变。它从红色开始,过渡到 黄色的:
#grad {
background-image: linear-gradient(to right, red , yellow);
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(to right, red , yellow);
}
</style>
</head>
<body>
<h1>Linear Gradient - Left to Right</h1>
<p>This linear gradient starts red at the left, transitioning to yellow (to the right):</p>
<div id="grad1"></div>
</body>
</html>
方向 - 对角线
您可以通过指定水平和垂直起始位置来制作对角渐变。
以下示例显示了从左上角开始(到右下角)的线性渐变。它从红色开始,逐渐变为黄色:
#grad {
background-image: linear-gradient(to bottom right, red, yellow);
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(to bottom right, red, yellow);
}
</style>
</head>
<body>
<h1>Linear Gradient - Diagonal</h1>
<p>This linear gradient starts red at top left, transitioning to yellow (at bottom right):</p>
<div id="grad1"></div>
</body>
</html>
如果你想更好地控制渐变的方向, 您可以定义一个角度,而不是预定义的方向(到底部、到 顶部、右侧、左侧、右下角等)。 0deg 值相当于 “到达顶点”。 90deg 值相当于“向右”。值为 180°相当于“到底部”。
background-image: linear-gradient(angle, color-stop1, color-stop2);
以下示例展示了如何在线性渐变上使用角度:
#grad {
background-image: linear-gradient(180deg, red, yellow);
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 100px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(0deg, red, yellow);
}
#grad2 {
height: 100px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(90deg, red, yellow);
}
#grad3 {
height: 100px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(180deg, red, yellow);
}
#grad4 {
height: 100px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(-90deg, red, yellow);
}
</style>
</head>
<body>
<h1>Linear Gradients - Using Different Angles</h1>
<div id="grad1" style="text-align:center;">0deg</div><br>
<div id="grad2" style="text-align:center;">90deg</div><br>
<div id="grad3" style="text-align:center;">180deg</div><br>
<div id="grad4" style="text-align:center;">-90deg</div>
</body>
</html>
以下示例显示了线性渐变(从上到下) 多个色标:
#grad {
background-image: linear-gradient(red, yellow, green);
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(red, yellow, green);
}
#grad2 {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(red, orange, yellow, green, blue, indigo, violet);
}
#grad3 {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(red 10%, green 85%, blue 90%);
}
</style>
</head>
<body>
<h1>Linear Gradients - Multiple Color Stops</h1>
<p><strong>Note:</strong> Color stops are spaced evenly when no percents are specified.</p>
<h2>3 Color Stops (evenly spaced):</h2>
<div id="grad1"></div>
<h2>7 Color Stops (evenly spaced):</h2>
<div id="grad2"></div>
<h2>3 Color Stops (not evenly spaced):</h2>
<div id="grad3"></div>
</body>
</html>
以下示例演示如何使用彩虹的颜色和一些文本创建线性渐变(从左到右):
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 55px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
</style>
</head>
<body>
<div id="grad1" style="text-align:center;margin:auto;color:#888888;font-size:40px;font-weight:bold">
Rainbow Background
</div>
</body>
</html>
CSS 渐变还支持透明度,可用于创建淡入淡出效果。
为了增加透明度,我们使用 rgba() 函数来定义色标。 rgba() 函数中的最后一个参数可以是 0 到 1 之间的值,并且它 定义颜色的透明度:0表示完全透明,1表示 表示全彩(无透明度)。
以下示例显示了从左侧开始的线性渐变。它开始完全透明,过渡到全红色:
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0),
rgba(255,0,0,1));
}
自己尝试一下→
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
</style>
</head>
<body>
<h1>Linear Gradient - Transparency</h1>
<p>To add transparency, we use the rgba() function to define the color stops. The last parameter in the rgba() function can be a value from 0 to 1, and it defines the transparency of the color: 0 indicates full transparency, 1 indicates full color (no transparency).</p>
<div id="grad1"></div>
</body>
</html>
Repeating-Linear-gradient() 函数用于重复线性渐变:
重复线性渐变:
#grad {
background-image:
repeating-linear-gradient(red, yellow 10%, green 20%);
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}
#grad2 {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: repeating-linear-gradient(45deg,red,yellow 7%,green 10%);
}
#grad3 {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: repeating-linear-gradient(190deg,red,yellow 7%,green 10%);
}
#grad4 {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: repeating-linear-gradient(90deg,red,yellow 7%,green 10%);
}
#grad5 {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: repeating-linear-gradient(45deg, red 0px, red 10px, red 10px, yellow 10px, yellow 20px);
}
</style>
</head>
<body>
<h1>Repeating Linear Gradient</h1>
<div id="grad1"></div>
<p>A repeating gradient on 45deg axe starting red and finishing green:</p>
<div id="grad2"></div>
<p>A repeating gradient on 190deg axe starting red and finishing green:</p>
<div id="grad3"></div>
<p>A repeating gradient on 90deg axe starting red and finishing green:</p>
<div id="grad4"></div>
<p>A repeating linear gradient with solid stripes:</p>
<div id="grad5"></div>
</body>
</html>