css边缘模糊制作
使用 box-shadow 实现边缘模糊
通过 box-shadow 属性可以快速为元素添加边缘模糊效果。调整模糊半径（blur）参数控制模糊程度，spread 参数控制阴影扩散范围。
.element {
box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.3); /* 水平偏移 垂直偏移 模糊半径 扩散范围 颜色 */
}结合 filter: blur() 模糊边缘
filter 属性中的 blur() 函数可直接模糊元素内容，但需注意此方法会模糊整个元素内容，而非仅边缘。通常配合 overflow: hidden 限制模糊范围。
.container {
overflow: hidden;
}
.blur-edge {
filter: blur(5px);
margin: -5px; /* 抵消模糊导致的边缘溢出 */
}使用伪元素创建渐变遮罩
通过伪元素叠加线性渐变背景，实现边缘过渡模糊的视觉效果。此方法适合需要渐隐效果的场景。
.element {
position: relative;
overflow: hidden;
}
.element::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 20px;
background: linear-gradient(to bottom, rgba(255,255,255,0.8), transparent);
}SVG 模糊滤镜（feGaussianBlur）
通过 SVG 滤镜实现更复杂的边缘模糊效果，适用于不规则形状。需定义 SVG 滤镜后通过 CSS 引用。
<svg width="0" height="0">
<filter id="blur-edge">
<feGaussianBlur stdDeviation="5" edgeMode="duplicate" />
</filter>
</svg>.element {
filter: url(#blur-edge);
}注意事项
box-shadow和伪元素方法性能较好，适合简单场景。filter: blur()可能影响渲染性能，慎用于频繁动画或复杂页面。- SVG 滤镜兼容性较好，但需额外 HTML 结构。
