CSS blur()函数在DIV中渲染异常线条的问题求助

为啥会出现这种线条？ #

这大概率是浏览器渲染大半径模糊时的精度问题——当blur值远大于元素本身尺寸时，边缘的像素采样计算容易出现断层，尤其是多个模糊色块叠加的时候，颜色过渡的边界会因为采样不充分出现硬线条。另外你用了vw这种动态单位，像素对齐的误差也会加剧这个问题。

试试这几个解决办法 #

1. 调大元素尺寸，按比例降模糊半径 #

把气泡的宽高翻倍，同时把blur值减半，视觉上的模糊效果差不多，但渲染时的像素采样会更充分，边缘就不容易出断层。比如粉色气泡原来15vw配140px模糊，改成30vw宽高，blur改成70px，再微调位置补偿尺寸变化：

.pink-bg-bubble {
    position: absolute;
    background-color: var(--pink);
    height: 30vw;
    width: 30vw;
    filter: blur(70px);
    margin-left: 7.5%;
    margin-top: -7.5%;
    z-index: 200 !important;
}

2. 加个微小的缩放/旋转 #

给每个气泡加个transform: scale(1.01)或者transform: rotate(0.01deg)，打破浏览器的像素对齐规则，强制重新计算模糊采样，不会改视觉效果，但能消掉线条：

.pink-bg-bubble {
    /* 原有样式不动，加下面这句 */
    transform: scale(1.01);
}

3. 用伪元素包裹模糊效果 #

把模糊效果移到伪元素上，让原元素当容器，伪元素放大超出容器范围，避免边缘的采样限制，模糊过渡会更均匀：

.pink-bg-bubble {
    position: absolute;
    height: 15vw;
    width: 15vw;
    margin-left: 15%;
    z-index: 200 !important;
    overflow: hidden;
}

.pink-bg-bubble::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background-color: var(--pink);
    filter: blur(140px);
}

4. 父容器加个弱模糊过渡（可选） #

如果是多个气泡叠加的地方出线，可以在它们的父容器加backdrop-filter: blur(1px)，让过渡区域再模糊一次，把线条融掉：

.parent-container {
    backdrop-filter: blur(1px);
}

实操建议 #

优先试方案1和2，改动小兼容性好。要是还不行，再上伪元素的方法。

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