如何模糊图像div的边框？

Question

有人可以帮助我吗？

我尝试了框阴影和边框，但无法获得边框的透明度：

<div class="" style="border-radius: 125px;
                     width: 125px;
                     height: 125px;
                     margin: auto;
                     box-shadow: 0 0 0 6px rgba(68,68,68,0.25), 0 0 0 15px rgba(68,68,68,0.35); ">
<img src="images/tracks_bg.png" width="100%" height="100%" style="border-radius: 50%; opacity: 1 !important;">
</div>

Answer 1

你可以

• 使用包装DIV
• 在您的包装中放置绝对定位（全尺寸）模糊 DIV
• 在您的包装中放置一个圆圈，其背景图像与模糊的DIV相同
• 使用box-shadow n圆圈轨道图像DIV元素
进行游戏

/*QuickReset*/ *{margin:0;box-sizing:border-box;} html,body{height:100%;font:14px/1.4 sans-serif;}

.player {
  position: relative;
  overflow: hidden;
  height: 100vh;
  background: #000; 
}

.trackImageBlur {
  position: absolute;
  background: none 50% 50% / cover;
  opacity:0.6; /* lower opacity so we can transpare the parent's #000 bg */
  padding: 4vw; margin: -4vw; /* prevent seeing blurred-out edges */
  box-sizing: content-box; /* apply normal paddings (on the outside) */
  width: 100%;
  height: 100%;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

.trackImage {
  position: absolute;
  background: none 50% 50% / 150%;
  width: 60vh;
  height: 60vh;
  border-radius: 50%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  box-shadow:
  0 0 0 20vh rgba(0, 0, 0, 0.2),
  0 0 0 12vh rgba(0, 0, 0, 0.2),
  0 0 0 9vh rgba(0, 0, 0, 0.3),
  0 0 0 3vh rgba(0, 0, 0, 0.4);
}

<div class="player">
  <div class="trackImageBlur" style="background-image:url('//i.stack.imgur.com/ItuWP.png')"></div>
  <div class="trackImage" style="background-image:url('//i.stack.imgur.com/ItuWP.png')"></div>
</div>

Answer 2

试试这个，我目前正在使用这个box-shadow css代码，它对我来说很好用

box-shadow：0 14px 28px rgba（0,0,0,0.25），0 10px 10px rgba（0,0,0,0.22）;