radial-gradient多个颜色均匀分配渐变区域实例页面

效果：

第一个圈按下，看看渐变有没有视觉变化

代码：

CSS代码：

.radial-gradient,
.radial-gradient2 {
    width: 200px; height: 200px;
    border: 1px solid silver;
    background: radial-gradient(closest-side circle, yellow, orange, red, white);
}
.radial-gradient2 {
    border-color: gray;
    background: radial-gradient(closest-side circle, yellow 0, orange 33.33%, red 66.666%, white);
    position: relative;
}
.radial-gradient:active {
    position: absolute;
}

HTML代码：

<div class="radial-gradient"></div>
<div class="radial-gradient2"></div>