为什么圆形图像在 Safari 中被裁剪以及如何修复？

Safari 中的圆角（边框半径）

使用边框半径时可能会遇到问题，尤其是在 Safari 中尝试创建圆形图像时。

在 Safari 中，指定了边框半径的图像是从元素的外边界而不是图像本身裁剪的。当图像位于背景颜色与图像不同的容器中时，这种情况会变得很明显。

要解决此问题，请将图像放置在容器内，将边框与图像分开。然后，对图像和容器应用边框半径。

<div class="activity_rounded">
  <img  src="/static/imghwm/default1.png" data-src="http://placehold.it/100" class="lazy" alt="为什么圆形图像在 Safari 中被裁剪以及如何修复？" >
</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中文网其他相关文章！