昨天在 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>
我們看一下效果