1. 首页
  2. CSS 菜鸟教程
  3. CSS - 渐变

CSS - 渐变

CSS 渐变允许通过在两种或多种颜色之间创建平滑过渡来为 HTML 元素设计自定义颜色。

什么是 CSS 渐变？

  • 在CSS中，渐变是一种特殊类型的用户定义图像，可用于元素的背景或边框。
  • 我们可以使用函数 gradient（type， color1， color2， color3） 为任何 HTML 元素的背景属性设置渐变;
  • 缩放图像渐变不会降低其质量，因为这是由浏览器根据开发人员代码定义的。

CSS 渐变的类型

CSS 定义了三种类型的渐变

  • 线性梯度： 从左到右、从上到下或沿对角线移动。
  • 径向梯度： 从中心到边缘。
  • 圆锥梯度： 围绕一个中心点旋转。

线性梯度

线性渐变创建一个沿单一方向流动的颜色带，即从左到右、从上到下或以任何角度流动。

语法


linear-gradient(direction, color1, color2, ...);

/* Gradient from bottom right to top left */
linear-gradient(to top left, color1, color2, ...);

/* Gradient at an angle 45 degree */
linear-gradient(45deg, red, yellow);

direction 参数指定角度或方向 （ [向左 | 向右] ||[返回顶部 | 返回底部]）的梯度。

例

为了创建基本的线性渐变，您只需要两种颜色，它们被称为色标。您必须至少有两个，但也可以有两个以上。

以下示例演示了这一点：


<html>
<head>
	 	<style>
	 	 	 div {
	 	 	 	 	height: 70px;
	 	 	 	 	width: 100%;
	 	 	 }
	 	 	 .topBottom {
	 	 	 	 	background: linear-gradient(green, yellow);
	 	 	 }
	 	 	 .RightLeft{
	 	 	 	 	background: linear-gradient(to right, green, yellow);
	 	 	 }
	 	</style>
</head>

<body>
	 	<h1>Linear gradient</h1>
	 	<h3>Top to Bottom ( Default )</h3>
	 	 	 	 	<div class="topBottom"></div>
	 	<h3>Right to left</h3>
	 	 	 	 	<div class="RightLeft"></div>
</body>
</html>

径向梯度

径向渐变是一种渐变，由从中心点向外辐射的颜色组成。

在径向渐变中，颜色以圆形或椭圆形图案从中心的一种颜色平滑过渡到外边缘的另一种颜色。

语法


radial-gradient(shape size position, color1, color2..);
  • shape 参数定义渐变（圆形或椭圆）的形状。
  • size 参数指定形状的大小。
  • position 参数设置渐变的中心

为了创建基本的径向渐变，您只需要两种颜色。默认情况下，梯度的中心位于 50% 50% 标记处;其中渐变是椭圆形的，与其框的纵横比匹配。

让我们看一个例子：


<html>
<head>
	 	<style>
	 	 	 div {
	 	 	 	 	height: 100px;
	 	 	 	 	width: 100%;
	 	 	 }

	 	 	 .gradient {
	 	 	 	 	background: radial-gradient(green, yellow);
	 	 	 }	
	 	 	 .center-gradient {
	 	 	 	 	background:
	 	 	 	 	 	 radial-gradient(
	 	 	 	 	 	 	 	at 0% 50%,
	 	 	 	 	 	 	 	green 30px,
	 	 	 	 	 	 	 	yellow 60%,
	 	 	 	 	 	 	 	magenta 20%
	 	 	 	 	 	 );
	 	 	 }
	 	</style>
</head>

<body>
	 	<h1>Radial gradient</h1>
	 	<h3>Simple Radial Gradient</h3>
	 	 	 	<div class="gradient"></div>

	 	<h3>Center Positioned Radial Gradient</h3> 		
	 	 	 	<div class="center-gradient"></div>
</body>
</html>

圆锥梯度

圆锥形渐变，也称为圆锥形渐变或角渐变，是一种渐变类型，其中颜色以圆形或圆锥形图案排列，从 360 度弧形的中心点向外辐射。

语法


conic-gradient(from 'angle' at 'position', 'color-list')
  • position（可选）：指定渐变起点的位置。它可以是百分比或关键字，例如中心。
  • angle （可选）：指定渐变的起始角度（以度为单位）。
  • color-list ：定义颜色及其在渐变中的位置。

在此示例中，我们将创建一个具有四种不同颜色的圆锥梯度饼图，然后在图表的不同位置对齐梯度。


<!DOCTYPE html>
<html lang="en">
<head>
	 	 <style>
	 	 	 div {
	 	 	 	 	height: 80px;
	 	 	 	 	width: 110px;
	 	 	 	 	border-radius: 50%;	
	 	 	 }
	 	 	 .gradient1{
	 	 	 	 	background: conic-gradient(
	 	 	 	 	 	 	 	 	 	 	 	 from 45deg at 50% 50%,	
	 	 	 	 	 	 	 	 	 	 	 	 red, yellow, green,	
	 	 	 	 	 	 	 	 	 	 	 	 blue, red);
	 	 	 }
	 	 	 .gradient2{
	 	 	 	 	background: conic-gradient(
	 	 	 	 	 	 	 	 	 	 	 	 from 45deg at 20% 40%,	
	 	 	 	 	 	 	 	 	 	 	 	 red, yellow, green,	
	 	 	 	 	 	 	 	 	 	 	 	 blue, red);
	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h1>Conic Gradient Example</h1>
	 	 <h3>Align at center</h3>
	 	 	 	 <div class="gradient1"></div>
	 	 <h3>Align at 20-40</h3>
	 	 	 	 <div class="gradient2"></div>
</body>
</html>

边界的渐变

CSS 渐变也可用于创建花哨的边框。您可以使用各种渐变在边框图案中创建效果。

语法


border-image: linear-gradient('color-list')

您还可以使用径向和圆锥形渐变作为边框。

以下是在创建边界时使用渐变的示例：


<!DOCTYPE html>
<html lang="en">
<head>
	 	 	 <style>
	 	 	 	 	.gradient-border {
	 	 	 	 	 	 height: 200px;
	 	 	 	 	 	 width: 200px;
	 	 	 	 	 	 border: 10px solid;
	 	 	 	 	 	 border-image: linear-gradient(
	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 to right,	
	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 red, yellow,	
	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 green, blue) 1;
	 	 	 	 	}
	 	 	 </style>
</head>
<body>
	 	 	 <h2>Gradient Border </h2>
	 	 	 <div class="gradient-border"></div>
</body>
</html>

定位色标

通过定位渐变色标，可以控制渐变发生过渡的点。

语法


 linear-gradient(to right, red 10%, pink 30%, blue 60%)
  • to right： 指定渐变的方向。
  • red 10%： 将红色设置为在渐变的 10% 处停止
  • pink 30%： 将粉红色设置为在渐变的 30% 处停止。
  • blue 60%： 将蓝色设置为在渐变的 60% 处停止。

例


<html>
<head>
	 	<style>
	 	 	 div {
	 	 	 	 	height: 100px;
	 	 	 	 	width: 100%;
	 	 	 }

	 	 	 .linear-position {
	 	 	 	 	background: linear-gradient(to right,	
	 	 	 	 	 	 	 	 	 	 	 	 blue 15px, magenta 33%,	
	 	 	 	 	 	 	 	 	 	 	 	 red 66%, yellow 60%,	
	 	 	 	 	 	 	 	 	 	 	 	 orange 100%);
	 	 	 }
	 	</style>
</head>

<body>
	 	<div class="linear-position"></div>
</body>
</html>

创建强硬的线条

可以在两种颜色之间创建一条硬线，这样就无法看到平滑的过渡。这种效果可以通过在 CSS 渐变中仔细定位色标来实现。请看以下示例

例

在这个例子中，我们将使用梯度函数创建硬线。


<html>
<head>
	 	<style>
	 	 	 div {
	 	 	 	 	height: 100px;
	 	 	 	 	width: 100px;
	 	 	 	 	display: inline-block;
	 	 	 	 	text-align: center;
	 	 	 	 	margin: 5px;
	 	 	 }

	 	 	 .linear-hard-line {
	 	 	 	 	background: linear-gradient(to top right,	
	 	 	 	 	 	 	 	 	 	 	 	 	 	green 50%, orange 50%);
	 	 	 }
	 	</style>
</head>
<body>
	 	<div class="linear-hard-line"></div>
</body>
</html>

使用渐变的颜色条带

为了创建条纹效果，将每种颜色的第二个色标设置在与相邻颜色的第一个色标相同的位置。

语法


linear-gradient(to right, red 10%,	
	 	 	 	 	 	 	 	pink 10% 30%,	
	 	 	 	 	 	 	 	blue 60% 80%,
	 	 	 	 	 	 	 	yellow 80%);

例

在此示例中，将创建一个多色色带。


<html>
<head>
	 	<style>
	 	 	 div {
	 	 	 	 	height: 100px;
	 	 	 	 	width: 100%;
	 	 	 }

	 	 	 .linear-gradient-stripes {
	 	 	 	 	background: linear-gradient(
	 	 	 	 	 	 	 	 	 	 	to right,
	 	 	 	 	 	 	 	 	 	 	green 20%,
	 	 	 	 	 	 	 	 	 	 	lightgreen 20% 40%,	
	 	 	 	 	 	 	 	 	 	 	orange 40% 60%,
	 	 	 	 	 	 	 	 	 	 	yellow 60% 80%,
	 	 	 	 	 	 	 	 	 	 	red 80%);
	 	 	 }
	 	</style>
</head>
<body>
	 	<div class="linear-gradient-stripes">
	 	</div>
</body>
</html>

堆叠渐变

一个梯度可以叠加在其他梯度上。只需确保顶部的渐变不应完全不透明，以便可以看到其下方的渐变。

例

让我们看一个堆叠渐变的例子。


<html>
<head>
	 	<style>
	 	 	 div {
	 	 	 	 	height: 200px;
	 	 	 	 	width: 100%;
	 	 	 }
	 	 	 .stacked-linear {
	 	 	 	 	background:	
	 	 	 	 	 	 linear-gradient(90deg, green, yellow),
	 	 	 	 	 	 linear-gradient(220deg, white 70.71%, black 38%),
	 	 	 	 	 	 linear-gradient(217deg, orange, grey 70.71%);
	 	 	 }
	 	</style>
</head>

<body>
	 	<div class="stacked-linear">
	 	</div>
</body>
</html>

相关功能

下表列出了与 CSS 渐变相关的所有函数：

梯度类型 描述 Example
linear-gradient() 颜色从一个点到另一个点的直线过渡的渐变类型。
radial-gradient() 由从中心点向外辐射的颜色组成的渐变类型。
conic-gradient() 颜色以圆形或圆锥形图案排列的渐变类型。
repeating-linear-gradient() 允许您创建在指定方向上重复的线性渐变模式。
repeating-radial-gradient() 允许您创建重复的径向渐变图案。
repeating-conic-gradient() 允许您创建重复的圆锥渐变图案。
<< CSS - 多种背景 CSS - box-shadow（盒子阴影）属性 >>