其實并不難，用屬性 filter: blur(數字px); 即可。效果如下：
圖上的圓形內有色彩的漸變，同樣也是用filter: blur(數字px); 實現的，代碼如下：、
<template><div id="root" :style="{}"><div id="bgc"><div id="left1"><div id="left1-1"></div><div id="left1-2"></div><div id="left1-3"></div><div id="left1-4"></div></div><div id="left2"><div id="left2-1"></div><div id="left2-2"></div><div id="left2-3"></div><div id="left2-4"></div></div><div id="left3"><div id="left3-1"></div><div id="left3-2"></div><div id="left3-3"></div></div><div id="left4"><div id="left4-1"></div><div id="left4-2"></div><div id="left4-3"></div></div></div></div></template><style lang="scss" scoped>#root {position: relative;height: 100%;#bgc {position: absolute;left: 0;top: 0;width: 100%;height: 100%;background-color: #fdfeff;/** 生成模糊邊框 */#left1 {position: absolute;left: 380px;top: 360px;width: 224px;height: 224px;border-radius: 50%;overflow: hidden; /** 為了讓超出范圍的部分是頁面底色，需設置hidden */filter: blur(10px);animation: circleMove1 5s linear infinite alternate;/** 加了點動效，可忽略 */@keyframes circleMove1 {from {transform: translate(0)}to {transform: translate(-20px, -20px)}}#left1-1 {position: absolute;left: 46px;top: -48px;width: 167px;height: 172px;background: rgba(211, 247, 244, 0.7);filter: blur(45px);}#left1-2 {position: absolute;left: -15px;top: 38px;width: 127px;height: 106px;background: rgba(191, 205, 255, 0.7);filter: blur(88px);}#left1-3 {position: absolute;left: 42px;top: 119.93px;width: 107.05px;height: 84.41px;transform: rotate(20.06deg);background: rgba(249, 239, 198, 0.7);filter: blur(61px);}#left1-4 {position: absolute;left: 88px;top: 152.49px;width: 107.06px;height: 74.17px;transform: rotate(-40.44deg);background: rgba(215, 255, 248, 0.7);filter: blur(31px);}}#left2 {position: absolute;left: 650px;top: 150px;width: 168px;height: 168px;border-radius: 50%;overflow: hidden; /**為了讓超出范圍的部分是白色底色，需設置hidden */filter: blur(5px);animation: circleMove2 3s linear infinite alternate;@keyframes circleMove2 {from {transform: translate(0)}to {transform: translate(10px, -5px)}}#left2-1 {position: absolute;left: 35px;top: -36px;width: 125px;height: 130px;background: #d4f8f5;filter: blur(45px);}#left2-2 {position: absolute;left: -11px;top: 28.5px;width: 95px;height: 79.5px;opacity: 1;background: #afbffa;filter: blur(88px);}#left2-3 {position: absolute;left: 21.78px;top: 117.85px;width: 80.29px;height: 33.6px;transform: rotate(20.06deg);opacity: 1;background: #fdeeb2;filter: blur(225px);}#left2-4 {position: absolute;left: 98px;top: 118px;width: 60px;height: 62px;opacity: 1;background: #d0fefb;filter: blur(45px);}}#left3 {position: absolute;right: 510px;top: 150px;width: 240px;height: 240px;border-radius: 50%;overflow: hidden; /**為了讓超出范圍的部分是白色底色，需設置hidden */filter: blur(10px);animation: circleMove3 4s linear infinite alternate;@keyframes circleMove3 {from {transform: translate(0);}to {transform: translate(-20px, -7px);}}#left3-1 {position: absolute;left: 56.41px;top: -58.43px;width: 203.5px;height: 209.54px;opacity: 1;background: #fac9fa;filter: blur(92px);}#left3-2 {position: absolute;left: -36.27px;top: 22.16px;width: 185.36px;height: 191.41px;background: #9eb3ff;filter: blur(204px);}#left3-3 {position: absolute;left: 106.86px;top: 185.17px;width: 130px;height: 90.07px;transform: rotate(-40.44deg);background: #eceff9;filter: blur(367px);}}#left4 {position: absolute;right: 200px;top: 100px;width: 400px;height: 400px;border-radius: 50%;overflow: hidden; /**為了讓超出范圍的部分是白色底色，需設置hidden */filter: blur(20px);animation: circleMove4 5s linear infinite alternate;@keyframes circleMove4 {from {transform: translate(0);}to {transform: translate(25px, 1px);}}#left4-1 {position: absolute;left: 98.73px;top: -102.25px;width: 356.12px;height: 366.7px;background: rgba(247, 209, 247, 0.7);filter: blur(92px);}#left4-2 {position: absolute;left: -63.47px;top: 38.79px;width: 324.39px;height: 334.96px;background: rgba(150, 171, 244, 0.7);filter: blur(204px);}#left4-3 {position: absolute;left: 61.71px;top: 333.92px;width: 227.49px;height: 95.19px;transform: rotate(20.06deg);background: rgba(170, 254, 240, 0.7);filter: blur(175px);}}}</style>
)
