border-radius问题

Question

我用了border-radius之后，div是圆角了，但是圆角处老是可以看到一点底层div的颜色，明明都没有设置border，为什么会这样，这样很难看。

Answer 1

不给演示只截图就想知道为啥的提主明显就在耍流氓。

为什么？

想知道为什么首先要理解浏览器是如何渲染border-radius
在这之前还要理解，我们的显示器的局限。

受限于显示器的显示原理（横竖向的点阵）和有限的分辨率，圆角其实是不可能实现的，只能用点阵虚拟圆角显示

于是一开始的圆角是这样的

由点阵组成的圆角，可是。。。一点都不美观不圆滑呀！

所以为了圆滑和美观

这是在有限资源下的妥协，看起来确实美观 圆滑了不少

但这样hack的fix方案，会引发其他一些小问题

复杂的现实环境

原本在没有圆角的情况下，渲染box时只需要按照矩形来渲染即可
无需为圆角考虑

但有了圆角的情况呢?
我们通过绝对定位，把带圆角div的左下角放在一张图上

通过观察我们发现，圆角的灰度部分是alpha透明的形式与背景融合的

目的是为了圆之前说的「在有限资源下的妥协」

回到提主的情况，我猜测的没错，应该是在图像上设置了圆角的同时 设置了图像或上级div的背景颜色（可能还对上级div设置了同样的 border-radius？）或者类似情况

其实能导致出现这种情况的原因有很多，是哪个我也没法确定，但总之

这样导致了实际上相当于 层叠了两个一样的圆角

我们把重现简化一下。

将上面俩圆角进行层叠

是不是在黑黑的圆角的alpha部分看到了暗暗的红色？

我们再按照提主的情况简化的重现一下，前景换成白色，

可以看到在圆角的alpha部分半透明的露出了后面的图像，那部分正好也是后景的alpha部分

那么回到提主的问题

如何解决？

既然知道了为什么，那么解决方案应该已经心里有数了嘛～

避免层叠了两个一样的圆角

尝试简化问题
只在 img 外的 div 上设置 border-radius 于此同时设置

overflow:hidden;

这样在圆角部分会遮挡 img 的四边 成圆角状～

或者只设置圆角给 img 也可以

只要理解了浏览器如何渲染圆角，解决方法有很多～