iPad、iPad 2 上的边框半径问题

Posted 2023-03-12

【中文标题】iPad、iPad 2 上的边框半径问题

【英文标题】：Border-radius issue on iPad, iPad 2

【发布时间】：2014-10-10 09:29:52

【问题描述】：

在 iPad(3.2)、iPad 2 (4.3.2) 上存在边框半径问题。

代码如下：

.articles .post .left img
   width:100%; 
   border-radius: 0 0 100% 0; 
   -moz-border-radius: 0 0 100% 0;
   -khtml-border-radius: 0 0 100% 0;
   -webkit-transition: border-radius 1s;
   transition-delay: 0.1s;
   transition-duration: 0.5s;
   transition-property: all;
   transition-timing-function: ease;

这是我得到的结果：

关于如何获得我想要的结果的任何想法？

【参考方案1】：

在ios 4 上，在img 的容器上使用border-radius css 并设置over-flow:hidden。 容器会将img“切割”成圆角。

这是一个调整。

【参考方案2】：

尝试添加

-webkit-border-radius: 0 0 100% 0;

因为 IOS5 上的 Safari 需要它来渲染边框半径。

【讨论】：

试过了，但它对 iPad 或 iPad 2 没有任何影响。

它在其他版本的IOS，其他iPad上工作吗？您可以将页面的Html和CSS作为codepen发布，以便我们更好地调试

好的，我在 iPad 2 (5.0) 上检查了它，它工作正常。但在 iPad 2 (4.3.2) 上查看时，效果不显示。这是否意味着 iOS v 5.0 以下不支持边框半径？

我不认为IOS4支持百分比作为边界半径