css如何实现边框模糊的效果

其实并不难，用属性 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>