昨天在 follow 中看到了这样一个效果， 仔细看发现下侧浮层两个圆角透出了底图的部分内容#
思考#
第一反应是圆角的渲染导致的像素不匹配的问题
我尝试写一个例子重现这个问题
但是我尝试了不同大小的圆角和图片，并不能复现出这个问题
我尝试查看可能出现问题的样式
在尝试切换 backdrop-blur 的时候我发现这个问题消失了，所以问题是 backdrop-blur 这个属性的计算引起的
解决#
我尝试将这个属性拆分到元素内部
<div className="absolute bottom-0 w-full text-center rounded-b-sm overflow-hidden duration-500 opacity-0 group-hover:opacity-100">
<div className="z--1 absolute top-0 left-0 size-full bg-white/50 dark:bg-neutral-900/70"></div>
<div className="text-[13px] backdrop-blur-none group-hover:backdrop-blur-sm " >
text
</div>
</div>
可以看到，如果过渡动画应用在整个元素上，那么 backdrop-blur 的效果会在整体渲染完成后才进行
所以我们换个方法，将过度动画应用于内层的背景元素和模糊元素
<div className="absolute bottom-0 w-full text-center rounded-b-sm overflow-hidden duration-500">
<div className="z--1 absolute top-0 left-0 size-full bg-white/50 dark:bg-neutral-900/70 opacity-0 group-hover:opacity-100"></div>
<div className="text-[13px] backdrop-blur-none group-hover:backdrop-blur-sm opacity-0 group-hover:opacity-100" >
text
</div>
</div>
我们看一下效果