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

其实并不难，用属性 filter: blur(数字px); 即可。效果如下：

图上的圆形内有色彩的渐变，同样也是用filter: blur(数字px); 实现的，代码如下：、

<!-- 页面背景毛玻璃效果组件，注意父组件应当占据全部屏幕 -->
<script setup lang="ts"></script>

<template>
  <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>
</template>

<style scoped lang="scss">
@mixin outerCircle($left, $top, $width, $blur, $aniTime, $toX, $toY) {
  position: absolute;
  left: $left;
  top: $top;
  width: $width;
  height: $width;
  border-radius: 50%;
  /** 为了让超出范围的部分是页面底色，需设置hidden */
  overflow: hidden;
  /** blur函数实现模糊 */
  filter: blur($blur);
  animation: circleMove $aniTime linear infinite alternate;
  /** 加了点动效，如不需要可忽视animation属性 */
  @keyframes circleMove {
    from {
      transform: translate(0);
    }

    to {
      transform: translate($toX, $toY);
    }
  }
}

@mixin innerCircle($left, $top, $width, $height, $rotate, $bgc, $blur) {
  position: absolute;
  left: $left;
  top: $top;
  width: $width;
  height: $height;
  transform: rotate($rotate);
  background: $bgc;
  filter: blur($blur);
}


#bgc {

  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #fdfeff;

  /** 生成模糊边框 */
  #left1 {
    @include outerCircle(380px, 360px, 224px, 10px, 5s, #{random(100)}px, -#{random(50)}px);

    #left1-1 {
      @include innerCircle(46px, -48px, 167px, 172px, 0deg, rgba(211, 247, 244, 0.7), 45px);
    }

    #left1-2 {
      @include innerCircle(-15px, 38px, 127px, 106px, 0deg, rgba(191, 205, 255, 0.7), 88px);
    }

    #left1-3 {
      @include innerCircle(42px, 120px, 107px, 85px, 0deg, rgba(249, 239, 198, 0.7), 61px);
    }

    #left1-4 {
      @include innerCircle(88px, 152px, 107px, 74px, -41deg, rgba(215, 255, 248, 0.7), 31px)
    }
  }

  #left2 {
    @include outerCircle(550px, 130px, 168px, 5px, 4.5s, -#{random(40)}px, #{random(30)}px);

    #left2-1 {
      @include innerCircle(35px, -36px, 125px, 130px, 0deg, #d4f8f5, 45px);
    }

    #left2-2 {
      @include innerCircle(-11px, 28.5px, 95px, 80px, 0deg, #afbffa, 88px);
    }

    #left2-3 {
      @include innerCircle(22px, 118px, 80px, 33px, 20deg, #fdeeb2, 225px);
    }

    #left2-4 {
      @include innerCircle(98px, 118px, 60px, 62px, 0deg, #d0fefb, 45px);
    }
  }

  #left3 {
    @include outerCircle(957px, 150px, 240px, 10px, 4s, -#{random(50)}px, -#{random(40)}px);

    #left3-1 {
      @include innerCircle(56px, -58px, 203px, 209px, 0deg, #fac9fa, 92px);
    }

    #left3-2 {
      @include innerCircle(-36px, 22px, 185px, 191px, 0deg, #9eb3ff, 204px);
    }

    #left3-3 {
      @include innerCircle(107px, 185px, 130px, 90px, -40deg, #eceff9, 367px);
    }
  }

  #left4 {
    @include outerCircle(1108px, 100px, 400px, 20px, 5s, #{random(50)}px, -#{random(20)}px);

    #left4-1 {
      @include innerCircle(99px, -102px, 356px, 367px, 0deg, rgba(247, 209, 247, 0.7), 92px);
    }

    #left4-2 {
      @include innerCircle(-64px, 38px, 324px, 334px, 0deg, rgba(150, 171, 244, 0.7), 204px);
    }

    #left4-3 {
      @include innerCircle(62px, 334px, 227px, 95px, 20deg, rgba(170, 254, 240, 0.7), 175px);
    }
  }
}
</style>