如何使用CSS实现分隔线左右边缘模糊柔化效果

完全可以通过纯CSS实现分隔线左右边缘模糊、和背景图平滑衔接的效果。你原有代码存在两个基础问题：一是background-color属性不支持渐变值，渐变需要赋值给background/background-image属性；二是原生border绘制的线条是硬边，无法直接做模糊渐隐处理，需要替换实现方式。

核心实现思路 #

• 移除原有硬边的border-top、border-bottom属性，改用伪元素绘制上下分隔线，方便单独给线条加模糊、渐隐效果
• 借助CSS mask属性给容器和分隔线都加上左右方向的透明渐变遮罩，实现边缘自然淡出
• 修正原有错误的渐变属性写法，匹配毛玻璃容器的透明度过渡逻辑

完整实现代码 #

.front-name {
    position: fixed;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -30%);
    width: 80%;
    /* 修正渐变属性，容器背景左右两侧做透明过渡 */
    background: linear-gradient(to right, transparent, rgba(148, 148, 148, 0.2) 10%, rgba(148, 148, 148, 0.5) 90%, transparent);
    backdrop-filter: blur(4px);
    padding-top: 15px;
    padding-bottom: 20px;
    /* 容器整体加左右渐隐遮罩，和背景平滑衔接 */
    -webkit-mask: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

/* 伪元素绘制上下两条带柔化效果的分隔线 */
.front-name::before,
.front-name::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: #ffffff;
    /* 给线条加轻微模糊，消除生硬直角边 */
    filter: blur(0.8px);
    /* 分隔线单独加左右渐隐遮罩，匹配边缘模糊效果 */
    -webkit-mask: linear-gradient(to right, transparent, #fff 10%, #fff 90%, transparent);
    mask: linear-gradient(to right, transparent, #fff 10%, #fff 90%, transparent);
}

.front-name::before {
    top: 0;
}

.front-name::after {
    bottom: 0;
}

参数调整说明 #

• 调整mask渐变中的百分比数值，可以控制边缘模糊过渡的范围：数值越小，清晰区域占比越高、模糊过渡段越窄；数值越大，过渡段越宽、边缘淡出效果越柔和
• 调整filter: blur()的数值，可以控制分隔线本身的柔化程度，数值越大线条越朦胧
• 如果只需要单侧边模糊（比如参考的右边缘模糊效果），只需要删除mask渐变中对应左侧的transparent过渡段，仅保留右侧的透明淡出逻辑即可

内容的提问来源于stack exchange，提问作者mercedes