Page 133 - css揭秘

main::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
filter: blur(20px);
}

在图 4-20 中可以看到，这跟我们的期望已经相当接近了。模糊效果在
中心区域看起来非常完美，但在接近边缘处会逐渐消退。这是因为模糊效果
会削减实色像素所能覆盖的范围，削减的幅度正是模糊半径的长度。对伪元
素应用一个 red 背景有助于我们看清事情的真相（参见图 4-21）。
图 4-20
伪元素模糊的方法基本上成功了，
但模糊效果在边缘处会逐渐消退，
削弱了毛玻璃的视觉效果

图 4-21
添加一个 red 背景有助于解释
事情的真相

为了补偿这种情况，我们需要让伪元素相对其宿主元素的尺寸再向
外扩大至少 20px（即它的模糊半径）。可以通过 -20px 的外边距来达到目
的，由于不同浏览器的模糊算法可能存在差异，用一个更大的绝对值（比
如 -30px）会更保险一些。如图 4-22 所示，这个方法可以修复边缘模糊消

102 第 4 章 视觉效果

඀ࠡ JOEC