html – 在边框半径图像背景上添加边框渗透
发布时间：2020-12-14 16:38:54 所属栏目：资源 来源：网络整理
导读：我在蓝色背景的图像上添加了黑色边框,这样做时,它似乎会在边框的内侧添加一个非常明显的背景色轮廓.有没有办法摆脱这个？我正在使用的代码很简单： border-radius: 100%;border: 3px solid rgb(0,0); 作为示例,您可以通过向任何图像添加半径来查看背景颜色边
|
我在蓝色背景的图像上添加了黑色边框,这样做时,它似乎会在边框的内侧添加一个非常明显的背景色轮廓.有没有办法摆脱这个？我正在使用的代码很简单：
border-radius: 100%; border: 3px solid rgb(0,0); 作为示例,您可以通过向任何图像添加半径来查看背景颜色边缘： 解决方法
有几种方法可以避免恼人的边界半径背景流血：
方法1：具有背景颜色的包装纸 把< img>放好在包装器元素中,并向包装器添加填充,背景颜色与< img>的边框相匹配.这样,图像上发生的任何抗锯齿都会考虑包装器的背景颜色,而不是页面的背景颜色. 方法2：向图像添加背景颜色 为< img>添加背景颜色与边框颜色匹配.它将使用< img>的背景颜色而不是页面背景颜色来进行抗锯齿处理. 方法3：使用填充代替 不要打扰边框.添加填充到< img>等于您想要的边框大小,并以您想要的边框颜色添加背景颜色.这可以用最少量的代码获得相同的效果. 这是一个JSFiddle,每个方法都有：https://jsfiddle.net/4zpL98au/14/ （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |