在边界半径图像背景上添加边框渗透

Question

我在蓝色背景的图像上添加了黑色边框，这样做时，它似乎会在边框的内侧添加一个非常明显的背景色轮廓。有没有办法摆脱这个？我正在使用的代码很简单：

border-radius: 100%;
border: 3px solid rgb(0, 0, 0);

您可以通过向任何图像添加半径来查看背景颜色边缘，例如：

Answer 1

有几种方法可以避免恼人的边界半径背景流血：

方法1：具有背景颜色的包装

将<img>放入包装器元素中，并将填充添加到包装器，背景颜色与<img>的边框相匹配。这样，图像上发生的任何抗锯齿都会考虑包装器的背景颜色，而不是页面的背景颜色。

方法2：向图像添加背景颜色

为<img>添加与边框颜色匹配的背景颜色。它将使用<img>的背景颜色而不是页面背景颜色来进行抗锯齿处理。

方法3：使用填充

不要打扰边框。在<img>添加等于所需边框大小的填充，并添加所需边框颜色的背景颜色。这可以用最少量的代码获得相同的效果。

以下是每个方法的JSFiddle：https://jsfiddle.net/4zpL98au/14/

Answer 2

@stvnrynlds提供了一个有趣的答案，我想用实际代码自己测试一下。

我在下面创建了一个代码段，用于比较。

.test1 - 使用包装而不是边框​​填充

.test2 - 仅使用边框

.test1{
  border-radius: 50%;
  width:50px;
  height: 50px;
  padding:5px;
  background:black;
}

.test1 img{
  border-radius:50%;
}

.test2 img{
  border-radius: 50%;
  border: 5px solid black;
}

<div class="test1"><img src="http://i.imgur.com/4LM6DpN.gif"/></div>
<div class="test2"><img src="http://i.imgur.com/4LM6DpN.gif"/></div>

将500％放大到浏览器中即可看到最终结果：

Answer 3

只需添加背景颜色，就可以解决这个问题：

background:#000;
border-radius: 100%;
border: 3px solid #000;