Fork me on GitHub

CSS radial-gradient() 函数

CSS radial-gradient() 函数创建一个 <image>,用来展示由 原点(渐变中心) 辐射开的颜色渐变。这个方法得到的是一个 CSS <gradient> 数据类型的对象。本篇文章记录其简单使用及案例。

案例

首先献上 佐助万花筒写轮眼 效果案例。

以下是源码:

1
2
3
4
5
<div class="ordit">
<div class="maga1 mage"></div>
<div class="maga2 mage"></div>
<div class="maga3 mage"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.ordit{
width: 400px;
height: 400px;
background: #525252;
border-radius: 50%;
position:relative;
}
.mage{
width: 395px;
height: 150px;
position:absolute;
top:50%;
background: radial-gradient(197.5px 75px ellipse,transparent 112px,#E24545 190px,#000 196px,transparent 197.5px) ,
radial-gradient(50px circle,#525252 47px,#000 49px,transparent 50px);

}
.maga1{
transform:translateY(-50%) rotate(90deg);
}
.maga2{
transform:translateY(-50%) rotate(45deg);
}
.maga3{
transform:translateY(-50%) rotate(135deg);
}

介绍

由于 radial-gradient() 创建的是一个 <image> 类型,所以其只能作用于像 background-imageborder-image 这样的定义图片的 css 规则上。

径向渐变的形成

径向渐变(Radial gradients) 由其 中心点边缘形状轮廓位置色值结束点(color stops) 定义而成。 径向渐变的 中心点边缘形状 以及其延伸的部分,由连续缩放的若干同心轮廓 组成,这个轮廓由设定的边缘形状决定。色值结束点 用于设定 虚拟渐变射线(virtual gradient ray) 的变化方式,由 中心点 水平变化至右侧(如下图)。色值结束点 由百分比设定时,则是相对于终点为 渐变射线 与边缘形状相交点的 渐变半径渐变半径 的终点位置即为 100%。每个轮廓均为纯色,颜色由 渐变射线 上相应 横切点 所定义的颜色决定。边缘形状只能为圆形或者椭圆形。

语法

radial-gradient() 只存在两种渐变形状,正圆(circle)和椭圆(ellipse),大体的语法如下。

1
radial-gradient( [ x [, y] ] [ circle | ellipse ] [ extent-keyword ] at [ position ] , [color-stop [, length | persentage]]+ )

只设置起始颜色和结束颜色

对于径向渐变,在不指定渐变类型以及起点位置的情况下,其渐变距离和位置是由容器的尺寸决定的。渐变的起点位置会在容器的正中间开始,渐变的类型则和容器的宽高比例相关。

1
2
3
4
5
6
.a{  
width: 400px;
height: 200px;
margin-bottom: 50px;
background: radial-gradient(yellow,red);
}
1
<div class="a"></div>

circle关键字规定渐变形状为圆形

circle 关键字规定渐变的形状为圆形,设置了渐变形状后,其渐变距离为圆的最长对角线距离的一半,渐变结束线既不是按照宽度来的,也不是按照高度来的,是按照最远边角距离作为渐变结束线的。

1
2
3
4
5
6
.b{ 
width: 400px;
height: 200px;
margin-bottom: 50px;
background: radial-gradient(circle,yellow,red);
}
1
<div class="b"></div>

渐变的半径

形状关键字前只写一个值表示圆形的半径,此时 circle 关键字可缺省。

1
2
3
4
5
6
.c{
width: 400px;
height: 200px;
margin-bottom: 50px;
background: radial-gradient(80px circle,yellow,red);
}
1
<div class="c"></div>

at关键字设置渐变起点

at 后的第一个值表示:圆心(渐变起点)在容器中的横坐标,第二个值表示:圆心(渐变起点)在容器中的纵坐标 。

注:坐标值可以是百分比值 或者 像素值。

1
2
3
4
5
6
.d{
width: 400px;
height: 200px;
margin-bottom: 50px;
background: radial-gradient(at 50px 50px,yellow,red);
}
1
<div class="d"></div>

通过 at 关键字,设置渐变的起始位置,去掉 circle 关键字,则渐变形状会与容器比例保持一致。这是会变成默认的椭圆。

1
2
3
4
5
6
.e{
width: 400px;
height: 200px;
margin-bottom: 50px;
background: radial-gradient(at 50px 50px,yellow,red);
}
1
<div class="e"></div>

设置渐变的结束位置

radial-gradient 径向渐变支持4个关键字可以指定渐变终止点位置,如下:

1
2
3
4
closest-side:    渐变中心距离容器最近的边作为终止位置。
closest-corner: 渐变中心距离容器最近的角作为终止位置。
farthest-side: 渐变中心距离容器最远的边作为终止位置。
farthest-corner: 渐变中心距离容器最远的角作为终止位置(默认)。
1
2
3
4
5
6
.f{
width: 400px;
height: 200px;
margin-bottom: 50px;
background: radial-gradient(closest-side at 50px 50px,yellow,red);
}
1
<div class="f"></div>

设置颜色断点的位置

如果指定多个颜色,但未指定具体断点的位置,则这些颜色会均匀分配 0%~100% 的渐变区域。

1
2
3
4
5
6
.g{ 
width: 400px;
height: 200px;
margin-bottom: 50px;
background: radial-gradient( circle closest-side ,yellow,red 33.33%,orange 66.666%,white);
}
1
<div class="g"></div>

ellipse关键字设置椭圆渐变

椭圆渐变需要确定两个方向上的轴距离,第一个值表示横轴的半径值,第二个值表示纵轴的半径值。

1
2
3
4
5
6
.h{ 
width: 400px;
height: 200px;
margin-bottom: 50px;
background: radial-gradient(100px 50px ellipse at 100px 100px,yellow,red 33.33%,orange 66.666%,skyblue);
}
1
<div class="h"></div>

渐变的累加

1
2
3
4
5
6
7
8
.j{ 
width: 200px;
height: 100px;
margin-bottom: 50px;
background: radial-gradient(200px 100px ellipse,transparent 90px,yellow 91px,red 99px,transparent 100px),
radial-gradient(30px circle, red, red 29px, transparent 30px);

}
1
<div class="j"></div>

注意:当使用累加渐变背景的时候,需要给前一个渐变背景起始颜色设置为透明色
否则无法显示出后设置的渐变背景。

作用在border-image

1
2
3
4
5
6
7
8
9
.i{
width: 100px; height: 100px;
border: 50px solid;
/* border-radius: 50%; */
margin-bottom: 50px;
border-image: radial-gradient(circle, transparent 50px, yellow 51px, red) 50 stretch;

/*可惜border-image无法和border-radius同时生效*/
}
1
<div class="i"></div>

可惜 border-image 无法和 border-radius 同时生效,否则,天然镂空的铜钱效果随即出现…

0%