为带背景图的圆形div添加box-shadow时出现幽灵线的解决方法

我想要实现鼠标悬停时box-shadow“展开”的圆形背景图效果，但出现了幽灵线问题。尝试过设置黑色border和容器的黑色background-color，均无效果，请问还有其他解决思路吗？

原代码示例 #

CSS

body {
    background-color: black;
}

#imageShadow {
    height: 400px;
    width: 400px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border-radius: 50%;
    box-shadow: 0px 0px 40px 140px rgb(0, 0, 0) inset;
    transition: box-shadow 1s;
    background-image: url('https://images.freeimages.com/images/large-previews/866/butterfly-1-1535829.jpg');
}


#imageShadow:hover {
    box-shadow: 0 0 20px 20px rgb(0, 0, 0) inset;
}

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">  
</head>

<body>
<div id='imageShadow'></div>
</body>

</html>

问题截图 #

• 未悬停状态
  
• 悬停状态
  

这种幽灵线是浏览器渲染inset box-shadow与border-radius组合时的精度bug，尤其是阴影尺寸大幅过渡时更容易出现。以下是两种可靠的解决方法：

方法一：用伪元素做遮罩替代inset阴影 #

通过给容器添加圆形伪元素，利用伪元素的尺寸变化模拟阴影展开效果，完全规避inset阴影的渲染问题：

body {
    background-color: black;
}

#imageShadow {
    height: 400px;
    width: 400px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border-radius: 50%;
    background-image: url('https://images.freeimages.com/images/large-previews/866/butterfly-1-1535829.jpg');
    background-size: cover;
    position: relative;
    overflow: hidden;
}

#imageShadow::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 140px black;
    transition: box-shadow 1s;
}

#imageShadow:hover::before {
    box-shadow: 0 0 0 20px black;
}

方法二：优化阴影参数 + 背景裁剪 #

调整inset阴影的模糊半径和扩散半径比例，同时添加background-clip减少渲染冲突：

body {
    background-color: black;
}

#imageShadow {
    height: 400px;
    width: 400px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border-radius: 50%;
    /* 缩小模糊与扩散的极端差值，降低渲染压力 */
    box-shadow: 0 0 60px 120px rgb(0, 0, 0) inset;
    transition: box-shadow 1s;
    background-image: url('https://images.freeimages.com/images/large-previews/866/butterfly-1-1535829.jpg');
    background-size: cover;
    /* 限制背景范围，避免与阴影边缘冲突 */
    background-clip: padding-box;
    /* 1px透明border修正圆角渲染精度 */
    border: 1px solid transparent;
}

#imageShadow:hover {
    box-shadow: 0 0 20px 20px rgb(0, 0, 0) inset;
}

推荐优先使用方法一，伪元素遮罩的渲染稳定性更强，不会受浏览器圆角精度限制。

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