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

概述我在蓝色背景的图像上添加了黑色边框,这样做时,它似乎会在边框的内侧添加一个非常明显的背景色轮廓.有没有办法摆脱这个？我正在使用的代码很简单： border-radius: 100%;border: 3px solid rgb(0, 0, 0); 作为示例,您可以通过向任何图像添加半径来查看背景颜色边缘： 有几种方法可以避免恼人的边界半径背景流血： 方法1：具有背景颜色的包装纸 把< img>放好 我在蓝色背景的图像上添加了黑色边框,这样做时,它似乎会在边框的内侧添加一个非常明显的背景色轮廓.有没有办法摆脱这个？我正在使用的代码很简单：

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

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

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

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

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

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

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

方法3：使用填充代替

不要打扰边框.添加填充到< img>等于您想要的边框大小,并以您想要的边框颜色添加背景颜色.这可以用最少量的代码获得相同的效果.

这是一个Jsfiddle,每个方法都有：https://jsfiddle.net/4zpL98au/14/

总结

以上是内存溢出为你收集整理的html – 在边框半径图像背景上添加边框渗透全部内容，希望文章能够帮你解决html – 在边框半径图像背景上添加边框渗透所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。