1．径向渐变

radial-gradient() 函数用于创建一个径向渐变的“图像”，其一般调用格式为：

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

其中，参数shape定义渐变的形状，默认值为ellipse，指定椭圆形的径向渐变，值circle指定圆形的径向渐变。

参数size 定义渐变的大小，可能值有：

farthest-corner(默认)：指定径向渐变的半径长度为从圆心到离圆心最远的角；

closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边；

closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角；

farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边；

参数position  定义渐变的位置。可能值有：

center(默认)：设置中间为径向渐变圆心的纵坐标值。

top：设置顶部为径向渐变圆心的纵坐标值。

bottom：设置底部为径向渐变圆心的纵坐标值。

参数start-color，…，last-color用于指定渐变的起止颜色，可以使用长度值或百分比来指定起止色位置，但不允许负值。

repeating-radial-gradient() 函数用于创建重复的径向渐变“图像”，其一般调用格式为：

background-image: repeating-radial-gradient(shape size at position,start-color, ..., last-color);

设在页面中有，若定义.shape的样式规则为：

.shape

{

margin: 0 auto;

width: 400px;

height: 300px;

border: 1px solid;

background-image:radial-gradient(red , yellow);

}

可在页面中显示如图1所示的图案。图1中径向渐变从中心点开始以椭圆的形式向外渐变，颜色从红色开始，渐变转为黄色。

图1  红色以椭圆形状渐变为黄色

若修改.shape样式中background-image属性定义为：

background-image:radial-gradient(circle, red , yellow);

则在页面中显示如图2所示的图案。图2中径向渐变是以圆形的方式进行，颜色同样从红色开始，渐变转为黄色。

图2  圆形径向渐变

若修改.shape样式中background-image属性定义为：

background-image:radial-gradient(closest-side , red , yellow);

则在页面中显示如图3所示的图案。此时由于指定径向渐变的半径长度为从圆心到离圆心最近的边(上下两条边)，因此图3对比图1，黄色面积明显增大。读者可以试试将closest-side 依次修改为farthest-corner(默认)、closest-corner和farthest-side后，页面显示的图形与图3的差别。

图3  渐变大小为closest-side的径向渐变

若修改.shape样式中background-image属性定义为：

background-image:radial-gradient(closest-side at 60% 55%, red , yellow);

则在页面中显示如图4所示的图案。由于设置的渐变中心位置往右下偏了，因此图4中的椭圆形状向右下偏。

图4  渐变中心位置at 60% 55%

径向渐变可以指定多个颜色，例如若修改.shape样式中background-image属性定义为：

background-image:radial-gradient(red,orange,yellow,green,indigo,blue,violet);

则在页面中显示如图5所示的图案。

图5  七彩径向渐变

径向渐变中指定的颜色可以使用透明度，例如若修改.shape样式中background-image属性定义为：

background-image:radial-gradient( rgba(255,0,0,0), rgba(255,0,0,1));

则在页面中显示如图4所示的图案。

图6  使用了透明度的红色径向渐变

径向渐变中指定的颜色还可以定义停止位置，例如若修改.shape样式中background-image属性定义为：

background-image:radial-gradient(red 5%, green 15%, blue 60%);

则在页面中显示如图7所示的图案。

图7  颜色结点不均匀分布

若修改.shape样式中background-image属性定义为：

background-image:radial-gradient(red 50%, yellow 50%);

则均在页面中显示如图8所示的图案。此时，红黄两种颜色界限清楚，取消了渐变效果。

图8  黄底红圆

若修改.shape样式中background-image属性定义为：

background-image:radial-gradient(red 33%, yellow 33%, yellow 66%,blue 66%);

则在页面中显示如图9所示的图案。

图9  蓝底中的红黄椭圆

若修改.shape样式中background-image属性定义为：

background-image:radial-gradient(red 33%, yellow 66%,blue 66%);

则在页面中显示如图10所示的图案。注意图10与图9的差别，图10中间部分是红色向黄色的径向渐变。

图10  红黄间径向渐变

若修改.shape样式中background-image属性定义为：

background-image: repeating-radial-gradient(red, yellow 10%, blue 15%);

则在页面中显示如图11所示的图案。

图11  重复的径向渐变

若修改.shape样式中background-image属性定义为：

background-image: repeating-radial-gradient(circle, red 0, red 10px,

yellow 10px, yellow 20px, blue 20px, blue 30px) ;

则在页面中显示如图12所示的图案。

图12 红黄蓝三色圆环

2．利用径向渐变绘制图形

利用径向渐变可以绘制出图形，下面给出一些示例。

(1)同心圆。

若定义.shape的样式规则为：

.shape

{

margin: 0 auto;

width: 300px;

height: 300px;

border: 1px solid;

border-radius: 50%;

background-image: repeating-radial-gradient(red 0px, red 10px, #fff 10px, #fff 20px);

}

可在页面中显示如图13所示的红色同心圆图案。

图13  红色同心圆

若定义.shape的样式规则为：

.shape

{

margin: 0 auto;

width: 200px;

height: 200px;

border-radius: 50%;

border: 1px solid;

background-image: radial-gradient(60px at center center ,#fff 50% ,#000 50%);

}

可在页面中显示如图14所示的黑白同心圆图案。

图14  黑白同心圆

若修改.shape样式中background-image属性定义为：

background-image: radial-gradient(60px at center center  ,#000 50%,#fff 50%);

可在页面中显示如图15所示的白黑同心圆图案。

图15  白黑同心圆

若定义.shape的样式规则为：

.shape

{

margin:0 auto;

width: 300px;

height: 300px;

border-radius: 50%;

background: repeating-radial-gradient(#f00, #f00 4px, #ff0 5px, #f00 6px);

background-size: 100% 100%;

}

可在页面中显示如图16所示的同心圆图案。

图16  同心圆(background-size: 100% 100%;)

若修改上面.shape样式中background-size属性定义为：background-size: 50% 100%;，则页面中显示如图17所示的图案。

图17  同心圆(background-size: 50% 100%;)

若修改上面.shape样式中background-size属性定义为：background-size: 100% 50%;，则页面中显示如图18所示的图案。

图18  同心圆(background-size: 100% 50%;)

若修改上面.shape样式中background-size属性定义为：background-size: 50% 50%;，则页面中显示如图19所示的图案。

图19  同心圆(background-size: 50% 50%;)

若定义.shape的样式规则为：

.shape

{

position: absolute;

width: 262px;

height: 262px;

border-radius: 50%;

background: repeating-radial-gradient(#2a2928, #2a2928 4px, #ada9a0 5px,#2a2928 6px);

}

.shape:after

{

content: '';

position: absolute;

top: 50%;

left: 50%;

margin: -35px;

border: solid 1px #d9a388;

width: 68px;

height: 68px;

border-radius: 50%;

box-shadow: 0 0 0 4px #da5b33, inset 0 0 0 27px #da5b33;

background: #b5ac9a;

}

可在页面中显示如图20所示的唱片图案。

图20  唱片

(2)圆与椭圆。

若定义.shape的样式规则为：

.shape

{

margin: 0 auto;

width: 200px;

height: 200px;

border-radius: 50%;

border: 1px solid;

background: radial-gradient(50px 100px ellipse, transparent 40px, yellow 41px, red);

}

可在页面中显示如图21所示的圆中有椭圆的图案。

图21  圆与椭圆(1)

若修改.shape样式中background-image属性定义为：

background: radial-gradient(100px 50px ellipse, transparent 80px, yellow 81px, red);

可在页面中显示如图22所示的图案。

图22  圆与椭圆(2)

若定义.shape的样式规则为：

.shape

{

margin: 0 auto;

width: 200px;

height: 200px;

border-radius: 50%;

background: radial-gradient(50px 100px ellipse, transparent 40px,

yellow 41px, red 49px, transparent 50px),

radial-gradient(30px circle, red, red 29px, transparent 30px);

}

可在页面中显示如图23所示的椭圆中有圆的图案。这个图案像一只竖眼。

图23  椭圆与圆

若定义.shape的样式规则为：

.shape

{

margin: 0 auto;

width: 200px;

height: 200px;

border: 1px solid;

background:radial-gradient(10px 18px ellipse, transparent 8px,

yellow 9px, red 11px, transparent 13px),

radial-gradient(6px circle, red, red 6px, transparent 7px);

background-size: 50px 50px;

}

可在页面中显示如图24所示的排列的竖眼图案。

图24  “竖眼”的排列

若修改.shape样式中background-image属性定义为：

background:radial-gradient(10px 50px ellipse, transparent 8px,

yellow 9px, red 11px, transparent 13px),

radial-gradient(6px circle, red, red 6px, transparent 7px);

实际上只是将18px修改为50px，则在页面中显示如图25所示的图案。

图25  竖线中夹着圆

(3)眼睛。

若定义.shape的样式规则为：

.shape

{

margin: 50px auto;

width: 224px;

height: 128px;

background-color: #333;

border-radius: 50% 50% 45% 42%;

background-image:

radial-gradient(circle at 128px 64px, white 10px, transparent 10px),

radial-gradient(circle at 112px 64px, #333 22px, transparent 22px),

radial-gradient(circle at 112px 64px, white 32px, transparent 32px);

}

可在页面中显示如图26所示的黑眼睛图案。

图26 黑眼睛

(4)圆弧切角。

若定义.shape的样式规则为：

.shape

{

margin: 50px auto;

width:200px;

height: 200px;

background:#f0f;

background:radial-gradient(circle at top left,transparent 25px,#f0f 0) top left,

radial-gradient(circle at top right,transparent 25px,#f0f 0) top right,

radial-gradient(circle at bottom right,transparent 25px,#f0f 0) bottom right,

radial-gradient(circle at bottom left,transparent 25px,#f0f 0) bottom left;

background-size: 50% 50%;

background-repeat: no-repeat;

}

可在页面中显示如图27所示的圆弧切角矩形图案。

图27  圆弧切角矩形

(5)背景图案。

若定义.shape的样式规则为：

.shape

{

margin: 50px auto;

width:400px;

height: 400px;

background: radial-gradient(white 15%, transparent 16%),

radial-gradient(white 15%, transparent 16%), #d8d8d8;

background-position: 0 0, 50px 50px;

background-size: 100px 100px;

}

可在页面中显示如图28所示的圆点背景图案。

图28  圆点背景图案

若定义.shape的样式规则为：

.shape

{

margin: 0 auto;

width: 400px;

height: 300px;

border: 1px solid rgba(50, 50, 50, 0.9);

background-image:radial-gradient(rgba(255,255,255,0.4) 15%,transparent 16%),

radial-gradient(rgba(255,255,255,0.4) 15%,transparent 16%),

radial-gradient(black 15%,transparent 16%),

radial-gradient(black 15%,transparent 16%);

background-position: 0 0px,10px 10px,0 1px,10px 11px;

background-size: 20px 20px;

}

可在页面中显示如图29所示的格子背景图案。

图29  格子背景图案

若定义.shape的样式规则为：

.shape

{

margin: 0 auto;

width: 400px;

height: 300px;

border: 1px solid rgba(50, 50, 50, 0.9);

background:#ff0;

background-image:radial-gradient(closest-side, rgba(255,0,0,0) 98%,rgba(255,0,0,1) 99%);

background-size: 80px 80px;

}

可在页面中显示如图30所示的背景图案。下面有一些背景图案不好命名，就统一用背景图案称呼吧。

图30  背景图案(1)

将图30的圆饼交错地进行迭加，修改.shape的样式规则为：

.shape

{

margin: 0 auto;

width: 400px;

height: 300px;

border: 1px solid rgba(50, 50, 50, 0.9);

background:#ff0;

background-image:radial-gradient(closest-side, rgba(255,0,0,0) 98%,rgba(255,0,0,1) 99%),

radial-gradient(closest-side,rgba(255,0,0,0) 98%,

rgba(255,0,0,1) 99%);

background-position: 0 0px,40px 40px;

background-size: 80px 80px;

}

可在页面中显示如图31所示的背景图案。

图31  背景图案(2)

若定义.shape的样式规则为：

.shape

{

margin: 0 auto;

width: 400px;

height: 300px;

border: 1px solid rgba(50, 50, 50, 0.9);

background:#ff0;

background-image:radial-gradient(closest-side, transparent 0%, transparent 75%,

#B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%,

#FFFFFF 95%,#FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%);

background-size: 100px 100px;

}

可在页面中显示如图32所示的背景图案。

图32  背景图案(3)

若定义.shape的样式规则为：

.shape

{

margin: 0 auto;

width: 400px;

height: 300px;

border: 1px solid rgba(50, 50, 50, 0.9);

background:#ff0;

background-image:radial-gradient(closest-side, transparent 0%, transparent 75%,

#B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%,

#FFFFFF 95%,#FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%),

radial-gradient(closest-side, transparent 0%, transparent 75%,

#B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%,

#FFFFFF 95%,#FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%);

background-position: 0 0px, 50px 50px;

background-size: 100px 100px;

}

可在页面中显示如图33所示的背景图案。

图33  背景图案(4)

若定义.shape的样式规则为：

.shape

{

margin: 0 auto;

width: 400px;

height: 300px;

border: 1px solid rgba(50, 50, 50, 0.9);

background:#ff0;

background-image:radial-gradient(closest-side, transparent 0%, transparent 75%,

#B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%,

#FFFFFF 95%,#FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%,

#798B3C 113%, #798B3C 121%, #FFFFFF 122%, #FFFFFF 130%,

#E0EAD7 131%, #E0EAD7 140%),

radial-gradient(closest-side, transparent 0%, transparent 75%,

#B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%,

#FFFFFF 95%,#FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%, #798B3C 113%, #798B3C 121%, #FFFFFF 122%, #FFFFFF 130%,

#E0EAD7 131%, #E0EAD7 140%);

background-position: 0 0px, 50px 50px;

background-size: 100px 100px;

}

可在页面中显示如图34所示的背景图案。

图34  背景图案(5)

若定义.shape的样式规则为：

.shape

{

margin: 0 auto;

width: 400px;

height: 300px;

border: 1px solid rgba(50, 50, 50, 0.9);

background:#fff;

background-image: radial-gradient(SeaGreen  9px, transparent 10px),

repeating-radial-gradient(SeaGreen  0px, SeaGreen  4px, transparent 5px,

transparent 20px, SeaGreen  21px, SeaGreen  25px,

transparent 26px, transparent 50px);

background-position: 0 0;

background-size: 30px 30px, 90px 90px;

}

可在页面中显示如图35所示的背景图案。

图35  背景图案(6)

若定义.shape的样式规则为：

.shape

{

margin: 0 auto;

width: 400px;

height: 300px;

border: 1px solid rgba(50, 50, 50, 0.9);

background:#ff0;

background-image: radial-gradient(closest-side circle at 60% 43%, #ff0 26%,rgba(255, 255, 0, 0) 27%),

radial-gradient(closest-side circle at 40% 43%, #ff0 26%,rgba(255, 255, 0, 0) 27%),

radial-gradient(closest-side circle at 40% 22%, #f00 45%,rgba(255, 0, 0, 0) 46%),

radial-gradient(closest-side circle at 60% 22%, #f00 45%, rgba(255, 0, 0, 0) 46%),

radial-gradient(closest-side circle at 50% 35%, #f00 30%, rgba(255, 0, 0, 0) 31%),

radial-gradient(closest-side circle at 60% 43%, #ff0 26%,rgba(255, 255, 0, 0) 27%),

radial-gradient(closest-side circle at 40% 43%, #ff0 26%,rgba(255, 255, 0, 0) 27%),

radial-gradient(closest-side circle at 40% 22%, #f00 45%, rgba(255, 0, 0, 0) 46%),

radial-gradient(closest-side circle at 60% 22%, #f00 45%, rgba(255, 0, 0, 0) 46%),

radial-gradient(closest-side circle at 50% 35%, #f00 30%, rgba(255, 0, 0, 0) 31%);

background-position: 0 0%, 0 0%, 0 0%, 0 0%, 0 0%,50px 50px, 50px 50px, 50px 50px, 50px 50px, 50px 50px;

background-size: 100px 100px;

}

可在页面中显示如图36所示的红心背景图案。

图36  红心背景图案

若定义.shape的样式规则为：

.shape

{

margin: 0 auto;

width: 400px;

height: 300px;

border: 1px solid;

background:radial-gradient(circle at 50% 59%, #fff 3%, #000 4%,

#000 11%,rgba(0,0,0,0) 12%, rgba(0,0,0,0)) 60px 0,

radial-gradient(circle at 50% 41%, #000 3%, #fff 4%, #fff 11%,

rgba(255,255,255,0) 12%, rgba(255,255,255,0)) 60px 0,

radial-gradient(circle at 50% 59%, #fff 3%, #000 4%,

#000 11%, rgba(0,0,0,0) 12%, rgba(0,0,0,0)) 0 60px,

radial-gradient(circle at 50% 41%, #000 3%, #fff 4%,

#fff 11%, rgba(255,255,255,0) 12%, rgba(255,255,255,0)) 0 60px,

radial-gradient(circle at 100% 50%, #fff 16%, rgba(255,255,255,0) 17%),

radial-gradient(circle at 0% 50%, #000 16%, rgba(0,0,0,0) 17%),

radial-gradient(circle at 100% 50%, #fff 16%,rgba(255,255,255,0) 17%) 60px 60px,

radial-gradient(circle at 0% 50%, #000 16%,rgba(0,0,0,0) 17%) 60px 60px;

background-color:#f0f;

background-size:120px 120px;

}

可在页面中显示如图37所示的太极背景图案。

图37  太极背景图案

若定义.shape的样式规则为：

.shape

{

margin: 0 auto;

width: 400px;

height: 300px;

border: 1px solid;

background:radial-gradient(circle farthest-side at 0% 50%,

#fb1 23.5%,rgba(240,166,17,0) 0) 21px 30px,

radial-gradient(circle farthest-side at 0% 50%,

#B71 24%,rgba(240,166,17,0) 0) 19px 30px,

linear-gradient(#fb1 14%,rgba(240,166,17,0) 0,

rgba(240,166,17,0) 85%,#fb1 0) 0 0,

linear-gradient(150deg,#fb1 24%,#B71 0,#B71 26%,

rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,

#B71 0,#B71 76%,#fb1 0) 0 0,

linear-gradient(30deg,#fb1 24%,#B71 0,#B71 26%,

rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,

#B71 0,#B71 76%,#fb1 0) 0 0,

linear-gradient(90deg,#B71 2%,#fb1 0,#fb1 98%,#B71 0%) 0 0 #fb1;

background-size:40px 60px;

}

可在页面中显示如图38所示的六边形地砖背景图案。

图38  六边形地砖背景图案

3．径向渐变在动画制作中的应用实例

利用径向渐变绘制图形，定义适当的关键帧，可以实现动画效果。

(1)圆点的扩散。

编写如下的HTML文件。

html>

圆点的扩散title>

css 渐变 椭圆,CSS图形基础：利用径向渐变绘制图形相关推荐

  1. Matlab绘图基础——利用axes（坐标系图形对象）绘制重叠图像 及 一图多轴（一幅图绘制多个坐标轴）

    Matlab绘图基础--利用axes(坐标系图形对象)绘制重叠图像 及 一图多轴(一幅图绘制多个坐标轴) - 司徒鲜生 - 博客园 Matlab中axes函数解析_ljh0302的博客-CSDN博客_ ...

  2. css 利用径向渐变 画反向圆角：

    径向渐变:指从一个中心点开始沿着四周产生渐变效果. 语法: background: radial-gradient(shape size at position, start-color, ...,  ...

  3. html css做椭圆,css实现椭圆

    先实现个简单点的,用css实现一个圆,ok,直接上代码: .circle{ width: 100px; height:100px; background: red; border-radius: 50 ...

  4. 利用turtle库绘制图形---Python

    引入turtle库 pip3 install 库名 1.在cmd里安装pyintsaller包 第一步安装将Python代码转成exe的工具包–pyinstaller:需要打开cmd,然后在cmd里输 ...

  5. python中用于绘制各种图形_如何在Python绘制图形

    如何在Python绘制图形 Python提供了一种最流行的绘图库,称为Matplotlib.它是开源的,跨平台的,可以根据数组中的数据制作2D图.它通常用于数据可视化并通过各种图形表示. Matplo ...

  6. html设置径向渐变色,【前端Talkking】CSS系列-css3之径向渐变初探

    1 径向渐变radial-gradient 这是关于渐变的第二篇文章径向渐变,第一篇文章是线性渐变,有兴趣的可以看这里 1.1 基本语法 线性渐变是沿着一条直线渐变,而径向渐变则是沿着椭圆或者圆进行渐 ...

  7. CSS线性渐变和径向渐变详解

    第九章:渐变色 1.线性渐变 1.1.什么是线性渐变 1.2线性渐变的写法 2.径向渐变 2.1什么是径向渐变 2.2径向渐变的写法 总结 1.线性渐变 1.1.什么是线性渐变 线性渐变,顾名思义就是 ...

  8. css好看的html径向渐变,CSS3径向渐变

    上次说到CSS3中的线性渐变,表面上看起来似乎有些复杂,但是逐条分解下来其实也没有那么难理解,总结下来无外乎就三点:颜色.方向和位置.那么今天所要讲到的径向渐变相对来说会更复杂一些,不过没有关系,我们 ...

  9. 视频教程-CSS3网页设计与制作(6-11)：颜色特性/新型盒模型/边框/背景/渐变-HTML5/CSS

    CSS3网页设计与制作(6-11):颜色特性/新型盒模型/边框/背景/渐变 知识传播美丽,分享传递快乐.作者主要从事Java服务器端技术.前端与移动开发技术的研究和授课,已有10多年从业经验. IT老 ...

最新文章

  1. 马斯克要复活恐龙？乌龙还差不多
  2. 百度高德位置定位服务器,调用百度、高德地图App，百度地图网页版，App定位
  3. STL 去重 unique
  4. linux shell脚本编程技巧介绍（一）
  5. 【助教】关于代码提交相关注意事项
  6. javascript计算小数保留两位小数,多位小数的方法
  7. centos 安装指定版本的node
  8. 《数字图像处理》第三版笔记（一）模糊处理
  9. matlab gui 保存文件,Matlab GUI的文件打開和保存uigetfile uigetdir
  10. Premiere快捷键设置
  11. pygame学习笔记——飞机大战爆炸效果
  12. 食物语电脑版服务器一直维护,《食物语》进不去解决办法(图文)
  13. “庄家”：腾讯的投资“六合彩”
  14. 使用SpringBoot一小时快速搭建一个简单后台管理（后端篇）
  15. 利用定时/计数器T1产生定时时钟，由P1口控制8个发光二极管，使8个提示灯依次一个一个闪动，闪动频率为10次每秒（8个灯亮一遍为一个周期），循环
  16. python 大数据开发工程师_大数据系列之大数据开发工程师
  17. 【BZOJ2002】【HNOI2010】弹飞绵羊（LCT）
  18. 敏捷回顾会：经验教训的总结
  19. PHP - ChatGpt 学习 仅供参考
  20. （一）CDN技术分类概述

热门文章

  1. 业务代码如何才能不再写出大串的if/else？
  2. html属性 id去重,JS相关知识点总结
  3. Rust 管理员命令列表
  4. c++的构造函数赋值函数重载运算符等
  5. 浏览器使用华视电子设备读取身份证信息
  6. NR协议学习——RLC
  7. 超微服务器硬盘红灯_服务器硬盘亮红灯崩溃怎么办？数据丢失都是怎么找回的...
  8. 《红楼雷话》全文，很好很解气
  9. 对未来计算机的期盼,表达怀念过去期待未来的句子
  10. 一个只完成了一部分的小游戏。。。