CSS 圆 Angular 模糊边框

Question

我有一个 ionic4 应用程序，我需要在其中实现类似于下面卡片中的 img 效果。在边缘模糊到中心，然后在中心用另一个白色边框清除



我怎样才能做到这一点？请忽略编辑图标

Answer 1

<!-- Floating image-->
<img class="cardImage" src="{{card.img}}"><br>

<!-- Background -->
<img class="cardImage2" src="{{card.img}}"><br>


.cardImage {
  width: 92%;
  object-fit: cover;
  border:1px solid #021a40;
  position: absolute;
  clip-path: circle();
  top: 25px;
  margin-left: 4%;
  height: 110px;
}

.cardImage2 {
  width: 92%;
  object-fit: cover;
  opacity: 0.25;
  border-radius: 15px;
  margin-left: 4%;
  height: 130px;
}