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

前端之家收集整理的这篇文章主要介绍了html – 在边框半径图像背景上添加边框渗透前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在蓝色背景的图像上添加了黑色边框,这样做时,它似乎会在边框的内侧添加一个非常明显的背景色轮廓.有没有办法摆脱这个?我正在使用的代码很简单:
border-radius: 100%;
border: 3px solid rgb(0,0);

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

解决方法

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

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

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

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

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

方法3:使用填充代替

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

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

原文链接:https://www.f2er.com/html/227135.html

猜你在找的HTML相关文章