在边界半径图像背景上添加边框渗透
我在蓝色背景的图像上添加了黑色边框,这样做时,它似乎会在边框的内侧添加一个非常明显的背景色轮廓.有没有办法摆脱这个？我正在使用的代码很简单:
border-radius: 100%;
border: 3px solid rgb(0, 0, 0);
并且您可以通过向任何图像添加半径来查看背景颜色边缘,例如:
有几种方法可以避免恼人的边界半径背景出血：
方法1：具有背景色的包装纸
将放入<img>包装器元素中，并在包装器中添加填充，其背景颜色与<img>的边框匹配。这样，发生在图像上的任何抗锯齿功能都将考虑包装器的背景色，而不是页面的背景色。
方法2：将背景色添加到图像
向您的背景颜色添加<img>与边框颜色匹配的颜色。它将使用<img>的背景色而不是页面背景色进行抗锯齿。
方法3：使用填充代替
不要为边界而烦恼。将填充添加到<img>等于所需的边框大小，并在所需的边框颜色中添加背景色。这样可以用最少的代码获得相同的效果。
这是带有这些方法的JSFiddle：https ://jsfiddle.net/4zpL98au/14/