demo.html:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>div {width: 300px;height: 300px;border: 1px solid #000;margin: 10px auto;}/* 径向(圆形)渐变色 */div:nth-child(1) {background: radial-gradient(at left top, yellow, blue); /* [辐射半径]圆心位置,起始颜色,终止颜色 */}div:nth-child(2) {background: radial-gradient(100px at left top, yellow, blue); /* 辐射半径 圆心位置 */}div:nth-child(3) {background: radial-gradient(at 100px 100px, yellow, blue); /* 圆心位置可以是像素值 */}div:nth-child(4) {background: radial-gradient(at center, yellow 0%, blue 30%, red 70%, purple 100%); /* 多种颜色,百分比表示渐变半径上的位置 */}</style></head><body><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div></body></html>