马黑黑 发表于 2022-1-2 08:18

CSS3径向渐变函数radial-gradient()

本帖最后由 马黑黑 于 2022-1-2 10:45 编辑

CSS3径向渐变函数radial-gradient() | 马黑黑

径向渐变实际上指椭圆渐变，渐变从圆心点位置以椭圆形状向外扩展。在CSS3中，radial-gradient()函数实现background的背景径向渐变，其语法构成分为两大部分：

语法：radial-gradient(形状,颜色)

例子：background-gradient(circle,red,green);

说明：

一、形状

radial-gradient支持的形状共两个：circle和ellipse，前者是正圆后者是椭圆（默认）。形状部分的语法还可包含渐变位置和渐变大小：

①渐变位置：默认从圆心点位置开始以椭圆状向外扩散。值用 at 引导跟在形状和大小值之后，值可用百分比（n%）、像素（npx)、关键字（left，top，right，bottom以及表示四个角的组合如右上角 right top 等）。当用百分比时指的是xy坐标值，如 20% 10% 和 100px 60px。

②渐变大小：有四个值可用，缺省值是最后一个：

closest-side:半径为从圆心到最近边
closest-corner:半径为从圆心到最近角
farthest-side:半径为从圆心到最远边
farthest-corner:半径为从圆心到最远角（缺省时默认值）

上述渐变大小值放在形状值之后，用空格与形状值隔开，随后才用 at 引入位置值。看例子：

background:radial-gradient(circle closest-side at 10% 10%,red,blue,green);

其实，除非需要，否则形状及其所带入的大小、位置均可省略，使用其默认值，故而上面的语句可简化为：

background:radial-gradient(red,blue,green);

二、颜色

参与渐变的颜色至少要有两个，可以是无限多个，还可以连续重复或间隔重复颜色，只要喜欢。颜色值之间用英文逗号隔开，最后一个叫结束颜色值，不能再跟逗号，其后是英文括号和分号就完事。

颜色值支持透明色，transparent可以直接代替某个颜色值，另外可以使用 rgba() 函数定义单一颜色的透明度：

rgba(255,0,0,0.2)

rgba() 函数由四个数组成，前三个是红（red）、绿（green）、蓝（blue）成分值，最后一个是透明度值（alpha）：从0.1到1，1为不透明。

最后看实例加深理解：

<style type="text/css">
    .kDiv {
      width:100%; height:460px; padding:10px;
      background:radial-gradient(circle farthest-side at top right,coral,red,orange,blue,yellow,green);
    }
</style>

<div class="kDiv"></div>

本例，渐变形状为圆形（circle）、渐变大小是farthest-side，在右上角（top right）发起渐变，参与渐变的颜色有N多个。

马黑黑 发表于 2022-1-2 08:19

<p>演示：<br>&nbsp;</p>
<style type="text/css">
    .kDiv {
      width:100%; height:460px; padding:10px;
      background:radial-gradient(circle farthest-side at top right,coral,red,orange,blue,yellow,green);
    }
</style>

<div class="kDiv"></div>

马黑黑 发表于 2022-1-2 08:28

<p>演示：<br>&nbsp;</p>
<div style="margin:0 auto; width:95%; height:460px; background:radial-gradient(circle at left top,red,transparent 10%,blue);"></div>

马黑黑 发表于 2022-1-2 08:34

本帖最后由 马黑黑 于 2022-1-2 10:46 编辑

补充：参与渐变的颜色（包括透明色），还可以加入百分比，用以表示改颜色从渐变区域的那个百分比位置开始，从而压缩前一个颜色的结束位置。试看例子：

background:radial-gradient(red,orange 10%,green);

例中，橙色后面带10%，表示橙色从渐变区域10%的位置开始，则浅一个颜色红色在此处结束。

马黑黑 发表于 2022-1-2 08:36

<div style="margin:0 auto; width:95%; height:450px; background:radial-gradient(circle,red,orange 10%,green);"></div>

马黑黑 发表于 2022-1-2 08:36

5#代码：

<div style="margin:0 auto; width:95%; height:450px; background:radial-gradient(circle,red,orange 10%,green);"></div>

马黑黑 发表于 2022-1-2 08:44

<div style="margin:0 auto;widht:95%;height:450px;background:radial-gradient(circle at 100px 80px,rgba(255,0,0,1),rgba(0,0,0,0.1) 5%,rgba(200,200,120,0.8) 80%);"></div>

马黑黑 发表于 2022-1-2 08:57

本帖最后由 马黑黑 于 2022-1-2 08:59 编辑

7#演示了 rgba() 函数的透明应用，另用颜色的区域开始值的百分比来控制颜色的总体分布：

<div style="margin:0 auto;widht:95%;height:450px;background:radial-gradient(circle at 100px 80px,rgba(255,0,0,1),rgba(0,0,0,0.1) 5%,rgba(200,200,120,0.8) 80%);"></div>style部分的CSS代码中，radial-gradient用于发生径向渐变：

① circle 表示圆形渐变，at 100px 80px 表示渐变发生的起点位置；

② 第一个 rgba 颜色透明度值是 1，不透明；第二个颜色是黑色但透明度是0.1，很大的透明度，它从5%开始加入渐变，故而前面的红色被压缩成一个小太阳；最后一个 rgba 颜色也设置了较小的透明度（0.8），它从渐变区域的80%开始，它参与渐变的区域是20%余下的部分。


红影 发表于 2022-1-2 10:24

“当用百分比时指的是xy坐标值，”
原来是这样，前面对这个百分比一种迷糊，现在明白了{:4_187:}

红影 发表于 2022-1-2 10:24

这个帖子太详细了，黑黑的讲述非常清楚。{:4_199:}

马黑黑 发表于 2022-1-2 10:48

红影 发表于 2022-1-2 10:24
“当用百分比时指的是xy坐标值，”
原来是这样，前面对这个百分比一种迷糊，现在明白了

这里可能存在两个百分比：

一个是位置百分比，它表示圆点坐标（xy）起始值；

第二个是颜色百分比。如果颜色加入了百分比，表示这个颜色从哪里开始。

马黑黑 发表于 2022-1-2 10:49

红影 发表于 2022-1-2 10:24
这个帖子太详细了，黑黑的讲述非常清楚。

希望不是越说越糊涂就好{:5_106:}

小辣椒 发表于 2022-1-2 12:43

要学会运用不是看一遍可以领会的，小辣椒还在晕乎乎中

马黑黑 发表于 2022-1-2 16:13

小辣椒 发表于 2022-1-2 12:43
要学会运用不是看一遍可以领会的，小辣椒还在晕乎乎中

弄懂原理需要些时间
页: [1]
查看完整版本: CSS3径向渐变函数radial-gradient()