边界半径和溢出：隐藏（离子应用程序）

Posted 2023-02-23

【中文标题】边界半径和溢出：隐藏（离子应用程序）

【英文标题】：Border-radius and overflow:hidden (ionic app)

【发布时间】：2016-08-22 10:48:07

【问题描述】：

边框半径和溢出有一些问题：隐藏在 Ionic 应用程序中。 我有父母 .dtc-zero-eye 和 .dtc-zero-iris 孩子。

.dtc-zero-eye 
  display: flex;
  align-items: center;
  justify-content: center;
  top: 8.5vh;
  position: relative;
  z-index: 9;
  border: 8px solid #DCDDE1;
  background-color: #fff;
  width: 20vh;
  height: 20vh;
  border-radius: 5% 125% 5% 125%;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  overflow: hidden;

  .dtc-zero-iris 
    width: 12vh;
    height: 12vh;
    background-color: #2D9AFF;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

在 chrome 中尝试（调试模式）时一切正常。

但是当在 ios 设备上尝试测试草图时 - 有这些 =>

所以当我关闭边界半径时 - 溢出工作正常。 当然尝试了一些修复，例如“mask-image”，但正如预期的那样，它不起作用。

我真的在等待你们的回答，抱歉我的英语不好。

更新了，这里是jsFiddle

【问题讨论】：

关闭半径后会是什么样子？有一个 jsFiddle 或类似的东西会非常有用。

感谢您的关注，这里是link，您可以擦除边界半径，看看它是什么样的。

可能 iOS 使用边框的外部来剪辑内容？尝试关闭边框。

非常感谢！！！我试过了，发现你是对的 - iOS 确实使用边框外部进行剪裁。我认为您必须将其发布并回答，才能解决问题？）

【参考方案1】：

也许 iOS 使用边框的外部来剪辑内容？尝试关闭边框，看看会发生什么。

【讨论】：

“非常感谢！！！我试过了，发现你说得对 - iOS 确实使用边框外部进行剪辑。”