为什么我的 Safari 中的圆角不正确，如何修复它们？

圆角（边框半径）Safari 问题解释

使用 CSS 通过 border-radius 属性创建圆角时，Safari 中可能会出现意外问题。当尝试将图像转换为带有边框的圆形时，这个问题尤其明显。

在 Safari 中，浏览器根据元素的外边界（包括任何边框）计算边框半径，而不是根据元素的外边界计算边框半径。图像本身。

为了说明这一点，请考虑一个边框为 3px 的图像 (100px x 100px)，这会导致元素大小为 106px x 106 像素。向此元素添加 20% 的边框半径将从元素的外边缘裁剪图像，在其周围留下白色区域。

这种行为在较高的边框半径值（例如 50）下变得更加明显%) 并且当边框颜色设置为白色时。

要在 Safari 中解决此问题，需要对图像和容器都应用 border-radius element:

<div class="activity_rounded">
  <img src="http://placehold.it/100" />
</div>

.activity_rounded {
  display: inline-block;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -khtml-border-radius: 50%;
  border: 3px solid #fff;
}

.activity_rounded img {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -khtml-border-radius: 50%;
  vertical-align: middle;
}

这种分隔可确保边框半径正确应用于图像和周围元素，从而在 Safari 中在图像周围形成圆形边框。

以上是为什么我的 Safari 中的圆角不正确，如何修复它们？的详细内容。更多信息请关注PHP中文网其他相关文章！