径向渐变 radial-gradient

径向渐变中,默认渐变线为容器对角线,如果是外接一个椭圆,则为长轴与短轴所接矩形的对角线,如果是一个完美的正方形,则为外接圆的半径。

径向渐变方式主要由<size><position><shape>这三个参数影响,分别控制椭圆的圆心、形状和大小。

其渐变范围(渐变结束线)示意如下图,默认既不是按照宽度来的,也不是按照高度来的,是按照最远边角距离作为渐变结束线的:

background: radial-gradient(yellow,red);

指定渐变形状

形状 说明
circle 圆形
ellipse 椭圆形

圆形 circle

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

椭圆形 ellipse

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

指定渐变起始点位置

起始点位置可以有如下设置

起始点位置 说明
at top 位于上方
at right 位于右方
at bottom 位于下方
at left 位于左方
at top right 位于右上方
at bottom right 位于右下方
at bottom left 位于左下方
at top left 位于左上方

如:

background: radial-gradient(300px circle at top left,yellow,red);

指定渐变终止点位置

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

关键字 描述
closest-side 渐变中心距离容器最近的边作为终止位置。
closest-corner 渐变中心距离容器最近的角作为终止位置。
farthest-side 渐变中心距离容器最远的边作为终止位置。
farthest-corner 渐变中心距离容器最远的角作为终止位置。
background: radial-gradient(farthest-side circle,yellow,red);

也可以使用长度单位指定渐变线的长度:

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

如果是椭圆,可以指定长轴和短轴的长度:

background: radial-gradient(300px 100px ellipse,yellow,red);

指定渐变颜色节点

后面的参数可以指定渐变颜色节点

background: radial-gradient(closest-side circle, yellow, orange, red, white);

指定颜色节点位置

background: radial-gradient(300px 100px ellipse,yellow 10%,red);

可累加的径向渐变背景图

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

渐变背景尺寸控制

可以通过background-size属性控制背景的尺寸大小。注意不要设置background-repeat: no-repeat;

width: 100%;
height: 200px;
background: radial-gradient(5px circle, transparent 4px, yellow 5px, red 6px, transparent 7px),
	radial-gradient(3px circle, red, red 3px, transparent 4px);
background-color: rgba(255,255,0,.3);
background-size: 25px 50px;

可重复的径向渐变

background: repeating-radial-gradient(#ace, #ace 5px, #f96 5px, #f96 10px);
border-radius: 50%;

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress