CSS 函数 - radial-gradient()

上一页
下一页

在 CSS 中，函数 radial-gradient（） 允许您创建径向渐变作为元素的背景图像。径向渐变是从中心点向外辐射的渐变，颜色从该点以圆形或椭圆形方式向外混合。它们通常用于创建视觉上吸引人的背景效果或模仿照明和阴影。

为了创建基本的径向渐变，您至少需要两种颜色，这称为色标。此函数的结果是一个对象，一种数据类型为 <gradient> 的特殊类型的 <image>。

概述

  • 径向渐变没有固有尺寸，这意味着图像没有首选的大小或纵横比。
  • 图像的形状可以是圆形或椭圆形。
  • 该大小将与应用它的元素的大小匹配。
  • <gradient>数据类型只能在使用 <image> 的地方使用。
  • repeating-radial-gradient（） 函数不能与 <color>数据类型和 background-color 等属性一起使用。
  • 为了创建一个自我重复的径向渐变，你需要使用CSS函数 repeating-radial-gradient（）。

可能的值

径向梯度是通过指定梯度的中心（0%）和结束形状的大小和形状（100%）来定义的。函数 radial-gradient（） 可以具有以下值作为参数：

1. <position>：指定渐变的位置。如果未指定任何值，则默认为 <center>。

2. <ending-shape>：值可以是圆（渐变为半径恒定的圆）或椭圆（梯度为轴对齐的椭圆）。如果未指定任何值，则默认为椭圆。

3. <size>：指定渐变结束形状的大小。

  • 如果未指定任何值，则默认为 <farthest-corner>。
  • 该值可以显式指定，也可以由关键字指定。
  • 当 <ending-shape> 以圆的形式给出时，该值可以显式地作为 <length> 值传递，即圆的半径。不允许使用负值。
  • 当 <ending-shape> 作为椭圆给出时，该值可以作为 <length-percentage>传递，具有两个值，提供椭圆大小;其中第一个值是水平半径，第二个值是垂直半径。百分比值是相对于渐变框的维度而言的。不允许使用负值。
  • 如果未指定 <ending-shape>，则梯度的形状由提供的大小确定。
  • 一个 <length> 值指定一个圆。<length-percentage>中的两个值指定一个椭圆。
  • 单个 <percentage> 值无效。
  • 渐变、圆圈和椭圆接受各种关键字作为其大小，这些关键字将在后面的部分中列出。

4. <linear-color-stop>：由色标的 <color> 值以及一个或两个可选的色档位置值组成。

  • 止损位置值可以是 <percentage> ，也可以是<长度>值。
  • 值等于 0% 或 0，表示梯度的中心。
  • 值等于 100%，表示结束形状与虚拟渐变光线的交点。

5. <color-hint>：确定相邻色标之间的渐变进程。如果未指定值，则颜色过渡的中点是两个色标之间的中点。

下表列出了渐变、圆圈和椭圆接受作为其大小的关键字：

关键词 描述
closest-side

对于圆：渐变的结束形状与最靠近其中心的框的两侧相交。

对于椭圆：渐变的结束形状与最接近中心的垂直边和水平边相交。
closest-corner

渐变的结束形状正好与盒子离其中心最近的角相交。
farthest-side

对于圆：渐变的结束形状与框的两侧相交，最远于框的中心。

对于椭圆：渐变的结束形状与离中心最远的垂直边和水平边相交。
farthest-corner

渐变的结束形状恰好与盒子离其中心最远的角落相交。这是默认值。

语法


<gradial-gradient()> =	
	 gradial-gradient( [ <ending-shape> || to <size> ]? [ at <position> ]?, <color-stop-list> )

CSS radial-gradient（） - 组成

径向渐变是两种或多种颜色沿轴的渐进过渡。它由一个中心点、一个结束形状和两个或多个色标点表示。色标放置在从中心向右水平延伸的虚拟渐变射线上。

径向梯度组成

CSS radial-gradient（） - 基本示例

让我们看一个基本径向梯度的例子：


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

	 .basic-radial-gradient {
	 	 	background-image: radial-gradient(red, yellow);
	 	}	
</style>
</head>
<body>
	 	<h1>Basic radial gradient</h1>
	 	<div class="basic-radial-gradient"></div>
</body>
</html>

CSS radial-gradient（） - 颜色停止定位

使用百分比或绝对长度值，可以定位径向渐变中的颜色停止点。让我们看一个例子：


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

	 .position-radial-gradient {
	 	 	background-image: radial-gradient(red 35px, yellow 25%, green 55%);
	 	}	
</style>
</head>
<body>
	 	<h1>Position radial color stops</h1>
	 	<div class="position-radial-gradient"></div>
</body>
</html>

CSS radial-gradient（） - 中心定位

径向梯度的中心可以使用关键术语、百分比或绝对长度值进行定位。如果只给出一个值，即长度或百分比，那么同样的值将是重复的;否则，将重复从左到右的位置和从上开始的位置顺序。让我们看一个例子：


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

	 .center-gradient {
	 	 	 background-image:
	 	 	 	 	radial-gradient(
	 	 	 	 	 	 at 0% 50%,
	 	 	 	 	 	 lightgreen 30px,
	 	 	 	 	 	 blue 60%,
	 	 	 	 	 	 magenta 20%
	 	);
}
</style>
</head>
<body>
	 	<h1>Radial gradient center position</h1>
	 	<div class="center-gradient"></div>
</body>
</html>

有关 radial-gradient（） 的更多示例，请单击此处。

打印本页
上一页
下一页