CSS 辐射渐变背景 radial-gradient的实现

MDN参考资料

核心概念

1. 中心点

就是椭圆或者圆的中心

2. 边缘

就是椭圆或者圆的边缘。为什么要用边缘，而不用宽高呢，因为后面的几个关键概念，用的都是这个边缘。

3. 渐变颜色

跟线性渐变一样，一组颜色设定表示渐变过程。没什么好讲的，后面将统一用

[red, #fff 99%, blue]

用法

background-image:radial-gradient(形状 尺寸 at 中心位置，初始颜色，颜色+);

以最简单的用法

radial-gradient(red, blue)

radial-gradient(ellipse farthest-corner at center center, red 0, blue 100%)

代表的意思是：椭圆辐射 边缘在最远的角 中心点位置在图片中心，红色开始，蓝色结束

其中蓝色椭圆边缘是我加上去的，实际看不见，附代码：

.radial {
background: gold;
background-image:
radial-gradient( red, blue)
;
background-size: 400px 200px;
background-position: center center;
background-repeat: no-repeat;
height: 300px;
}

语法解析

 1. 形状

ellipse | circle

默认是ellipse椭圆。

2. 尺寸

closest-side | closest-corner | farthest-side | farthest-corner

宽度，高度

第一种，预设值

第一种是用系统的四种预设值

默认值是farthest-corner。 通过上图我们可以看到

closest-side 表示其边缘正好贴合最近的两个边（左边和上边）
closest-corner 表示其边缘正好贴合最近的那个角（左上角）
farthest-side 表示其边缘正好贴合最远的两个边（右边和下边）
默认值 farthest-corner表示其边缘正好贴合最远的角（右下角）

附代码：

.App {
display: flex;
flex-wrap: wrap;
}
.radial {
border: 1px solid gray;
box-sizing: border-box;
background: gold;
background-size: 400px 200px;
background-position: center center;
background-repeat: no-repeat;
height: 300px;
width: 50%
}
.closest-side {
background-image:
radial-gradient(closest-side at 100px 50px, red, #fff 99%, blue)
;
}
.closest-corner {
background-image:
radial-gradient(closest-corner at 100px 50px, red, #fff 99%, blue)								 
 1/2    1 2 下一页 尾页