在safari 6或更早版本中 - 图像与圆形边框重叠。有一个简单的解决方案吗?我尝试添加一个带溢出的周围div:隐藏但结果是一样的。
手前还不知道图像尺寸。
img {
border:5px solid black;
-webkit-border-radius:30px;
border-radius:30px;
}
答案 0 :(得分:0)
答案 1 :(得分:0)
没有。不幸的是,这是旧版safari中的一个已知错误。 (实际上它也出现在其他旧的浏览器中,但受影响的版本已经不再使用了)
浏览器在边框前面绘制前景图像。没有办法解决这个问题。
唯一的解决方案是:
从使用前景图像切换到背景图像。这是有效的,但从语义角度来看是一种痛苦,并且可能导致它自身的问题。
将img
标记放在div
内,并将边框放在div
上,而不是直接放在img
上。这确实涉及额外的标记,但可能是最可靠的修复方法。请注意,您可能需要将div
设置为display:inline-block
,以便缩小以适合图像的大小。
当然,您也可以手动编辑图像;使用Photoshop(或Gimp,或您使用的任何其他工具)给它圆角和边框,你根本不需要CSS。它有点像老派的解决方案,但相当肯定可以工作。
答案 2 :(得分:0)
看起来放弃边框并使用-webkit-box-shadow代替答案:
-webkit-box-shadow:0 0 0 5px black;
当然,我只在safari 6或更早版本的浏览器中执行此操作。