CSS 渐变


目录

    显示目录

渐变背景:


Gradient Backgrounds

CSS 渐变可让您显示两个或多个指定颜色之间的平滑过渡。

CSS 定义了三种类型的渐变:

  • 线性渐变(下/上/左/右/对角线)

  • 径向渐变(由中心定义)

  • 圆锥曲线渐变(围绕中心点旋转)


CSS 线性渐变

要创建线性渐变,您必须定义 至少两个色标。色标是您想要呈现平滑过渡的颜色 之中。您还可以设置起点和沿线的方向(或角度) 带有渐变效果。

句法

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

方向 - 从上到下(这是默认值)

以下示例显示了从顶部开始的线性渐变。它从红色开始,逐渐变为黄色:

top to bottom (default)

例子

  #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>


方向 - 从左到右

以下示例显示了从左侧开始的线性渐变。它从红色开始,过渡到 黄色的:

left to right

例子

  #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>


方向 - 对角线

您可以通过指定水平和垂直起始位置来制作对角渐变。

以下示例显示了从左上角开始(到右下角)的线性渐变。它从红色开始,逐渐变为黄色:

top left to bottom right

例子

   #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);

以下示例展示了如何在线性渐变上使用角度:

180deg

例子

  #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>


以下示例演示如何使用彩虹的颜色和一些文本创建线性渐变(从左到右):

Rainbow Background

例子

   #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>