前端经验:完美的圆角

本经验消除圆角边缘的锯齿颗粒感

案例代码

<div className="w-[200px] h-[200px] rounded-[16px] mx-auto mt-[20px] relative overflow-hidden" ><img className="w-full h-full absolute" src="https://img0.pconline.com.cn/pconline/1202/03/2662990_code.png" alt="二维码" /><div className="flex flex-col items-center justify-center w-full h-full bg-[#333333] bg-opacity-95 absolute"><div className="mb-[8px]">支付前请阅读</div><div>《付费服务协议》</div><button>同意并支付</button></div>
</div>

效果图

可以看到圆角边缘有明显的白缝

改进后的代码

<div className="w-[200px] h-[200px] rounded-[16px] mx-auto mt-[20px] relative" style={{ maskImage: ' radial-gradient(circle, white 100%, black 100%)' }}><img className="w-full h-full absolute" src="https://img0.pconline.com.cn/pconline/1202/03/2662990_code.png" alt="二维码" /><div className="flex flex-col items-center justify-center w-full h-full bg-[#333333] bg-opacity-95 absolute"><div className="mb-[8px]">支付前请阅读</div><div>《付费服务协议》</div><button>同意并支付</button></div>
</div>

效果图

现在圆角边缘的缝消失了

改进点：

1. 去掉父级元素的overflow-hidden
2. 给父级元素设置mask-image