万万没想到，ios圆角（border-radius）失效背后居然还有这些秘密

iOS 设备上圆角失效问题终极指南：使用 transform 和 overflow: hidden

前言

追求完美的开发者们，你们是不是也曾为 iOS 设备上圆角（border-radius）失效而挠头抓耳？明明在其他设备上圆润光滑的圆角，一到苹果阵营就成了棱角分明的直角，真是让人强迫症都要犯了！别担心，作为一名热衷于技术研究的达人，我经过一番深入探索，终于发现了解决这一难题的关键，迫不及待地要和大家分享我的经验和心得。

罪魁祸首：transform

iOS 设备上圆角失效的罪魁祸首，就是 transform 属性。当元素使用了 transform 时，它的几何形状会被改变，导致圆角无法正确渲染。这对于我们这些前端开发人员来说，简直是一个晴天霹雳，因为 transform 是一个非常常用的属性，它可以实现各种各样的效果，如旋转、缩放、平移等等。难道为了兼容 iOS 设备，我们就必须放弃使用 transform 吗？当然不是！

解决之道：overflow: hidden

经过一番探索，我找到了一个既能使用 transform，又能让圆角在 iOS 设备上生效的妙招，那就是在需要设置圆角的元素上设置 overflow: hidden。overflow: hidden 属性可以隐藏元素的溢出内容，这样一来，圆角就不会被裁剪掉，从而可以正常显示。

具体操作步骤

1. 在需要设置圆角的元素上添加 overflow: hidden 属性。
2. 将 transform 属性应用到元素的父级元素上。
3. 在父级元素上设置 border-radius 属性。

示例代码

<div class="swiper-outbox">
  <div class="swiper-slide">
    <img src="image.png" alt="Image">
  </div>
</div>

.swiper-outbox {
  overflow: hidden;
}

.swiper-slide {
  transform: rotate(30deg);
}

.swiper-slide img {
  border-radius: 10px;
}

注意

如果将 border-radius 属性应用到元素本身，而不是其父级元素，则在 iOS 设备上圆角仍然会失效。这是因为 transform 属性会改变元素的几何形状，导致圆角无法正确渲染。

总结

iOS 设备上圆角（border-radius）失效的原因是 transform 属性导致的。我们可以通过在需要设置圆角的元素上设置 overflow: hidden，将 transform 属性应用到元素的父级元素上，并在父级元素上设置 border-radius 属性来解决这个问题。希望这篇博客文章能够帮助大家解决这个问题，让你们的网站在 iOS 设备上也能完美呈现。

常见问题解答

1. 为什么使用 overflow: hidden 可以解决问题？

overflow: hidden 可以隐藏元素的溢出内容，这样一来，圆角就不会被裁剪掉，从而可以正常显示。

2. 除了 overflow: hidden，还有什么方法可以解决这个问题？

没有其他方法可以在使用 transform 的情况下解决这个问题。

3. 为什么将 transform 属性应用到父级元素上？

将 transform 属性应用到父级元素上，可以让其子元素继承 transform 的效果，同时又不影响子元素的圆角。

4. 如果我想在多个子元素上设置不同的圆角怎么办？

在这种情况下，你可以在每个子元素上单独设置 overflow: hidden 和 border-radius 属性。

5. 有没有其他属性可以影响圆角的显示？

是的，box-sizing 属性也可以影响圆角的显示。box-sizing: border-box 可以让圆角延伸到元素的边框内。