css边缘模糊制作

CSS 边缘模糊制作方法

方法一：使用 box-shadow 属性

通过 box-shadow 属性可以为元素添加模糊的边缘效果。调整模糊半径可以控制边缘的模糊程度。

.blur-edge {
    box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.3);
}

• 参数说明：
  • 前两个 0 表示阴影的水平和垂直偏移量。
  • 第三个值 15px 表示模糊半径，数值越大越模糊。
  • 第四个值 5px 表示阴影的扩展范围。
  • rgba(0, 0, 0, 0.3) 控制阴影颜色和透明度。

方法二：使用 filter: blur()

filter 属性可以直接对元素内容进行模糊处理，但会模糊整个元素。若仅需边缘模糊，需结合其他方法。

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

• 适用于背景或图片的边缘模糊效果，但会模糊整个内容。

方法三：结合伪元素和 filter

通过伪元素为元素添加模糊边缘，避免模糊主体内容。

.blur-pseudo {
    position: relative;
    z-index: 1;
}

.blur-pseudo::after {
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: inherit;
    filter: blur(10px);
    z-index: -1;
    opacity: 0.7;
}

• 利用伪元素继承背景并扩展尺寸，再应用模糊效果。
• 调整 top、left 等负值控制边缘扩展范围。

方法四：使用 backdrop-filter

适用于为元素背后的内容添加模糊效果，模拟边缘模糊。

.blur-backdrop {
    backdrop-filter: blur(8px);
    background-color: rgba(255, 255, 255, 0.3);
}

• 仅模糊元素背后的区域，适合对话框或悬浮面板的边缘效果。

注意事项

• box-shadow 适合简单阴影模糊，但不支持复杂形状。
• filter: blur() 会模糊整个元素，需谨慎使用。
• 伪元素方法灵活性高，但需注意层级和定位。
• backdrop-filter 兼容性较差，需检查浏览器支持情况。