边界半径-您不只是喜欢它吗? 它很容易被过度使用,但是做得好而不是太频繁,圆角可以为几乎所有东西添加类的外观。
但是,即使所有浏览器都应用了抗锯齿功能,某些颜色组合也可能会产生锯齿状的效果。 以我的经验,冒犯者是深色背景且边框较浅 ,尤其是在灰白色背景下,尽管在所有浏览器中都存在,但在Safari中特别明显。
这是使用Safari拍摄的图像,通过三个不同的半径半径说明了这一点:
看起来还不错,但是您可以清楚地看到每个角落的锯齿状效果。 现在又是这些盒子,这次角更光滑:
和区别? 只需在不同元素之间划分颜色即可 —外部元素具有边框和指定的border-radius,而内部元素具有background-color和稍微较小的border-radius 。
这是一个简单的技巧,而不是一个巨大的差别,但肯定是有差异,有明显的改进,你可以看到。 我不确定为什么会有所不同,但我想这是因为抗锯齿算法的应用方式所致; 因为每种算法只处理一种颜色而不是两种颜色,或者是现在分开的抗锯齿合并在一起的方式; 的东西。
如果您想更详细地了解这些示例,请参阅以下实时演示 ,这些演示是从中获取这些屏幕截图的。 但是您也可以在此页面上看到它-顶部的类别选项卡,以及带有深蓝色标题的右下方的框,均使用此技术。 我在构建这些模板时开发了它,因为锯齿使我烦恼!
现在,它们像婴儿宝宝的底部一样光滑!
照片来源: meltingnoise
From: https://www.sitepoint.com/how-to-get-smoother-rounded-corners/