Vue 实现图片羽化与模糊边缘的方法

在 Vue 项目开发中，为图片添加羽化与模糊边缘效果，能显著提升页面的视觉美感与交互体验。下面将详细介绍如何实现这两个效果。

一、图片羽化效果

实现图片羽化效果，可借助 CSS 的 clip-path 属性。在 Vue 组件的模板中定义一个包含图片的元素：

<template>
  <div class="image-container">
    <img src="@/assets/image.jpg" alt="示例图片">
  </div>
</template>

接着在样式中使用 clip-path 创建羽化效果。以圆形羽化为例：

.image-container {
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 50%;
  clip-path: inset(0 round 50%);
}

上述代码中，width 和 height 设定了容器大小，overflow: hidden 隐藏溢出部分，border-radius: 50% 将容器设为圆形，clip-path: inset(0 round 50%) 则实现了圆形的羽化效果。若想实现其他形状的羽化，如矩形，可以调整 clip-path 的参数值。

二、图片模糊边缘效果

对于图片模糊边缘效果，可使用 CSS 的 filter 属性。同样在 Vue 组件模板中定义图片元素：

<template>
  <img class="blurred-image" src="@/assets/image.jpg" alt="示例图片">
</template>

然后在样式里通过 filter 属性添加模糊效果：

.blurred-image {
  filter: blur(5px);
}

这里的 blur(5px) 中的数值 5px 控制模糊程度，数值越大，模糊效果越明显。

另外，若只想让图片边缘模糊，可结合 box-shadow 属性来实现。在样式中添加：

.blurred-image {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  filter: blur(2px);
}

box-shadow 为图片添加了阴影效果，与 filter: blur(2px) 结合，能营造出边缘模糊的视觉效果。

通过上述方法，在 Vue 项目中轻松实现图片的羽化与模糊边缘效果，开发者可根据项目需求灵活调整参数，打造出独具特色的页面视觉效果，提升用户体验。