Safari

Question

使用CSS我尝试创建一个弯曲的叠加层，它将位于一个元素内并显示在其内容之上。

通过将border-width和border-radius设置为应用于左下角，我设法实现了我的目标。这在Chrome和Firefox中运行良好，但在Safari中有一个奇怪的结果。

如何才能在Safari中正确显示？

截图

Chrome（正确）：

Safari（不正确）：

最小的例子

＆＃13;

＆＃13;

#container {
  width: 300px;
  height: 300px;
  display: block;
  border: 1px solid black;
  background-color: grey;
  overflow: hidden;
}

#overlay {
  border-color: blue;
  border-radius: 0 0 0 100%;
  border-style: solid;
  border-width: 0 0 200px 200px;
  display: block;
  height: 100%;
  margin-left: -200px;
  position: relative;
  width: 100%;
}

＆＃13;

<div id="container">
  <div id="overlay"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

通过将叠加层设置为整个圆圈来管理以实现所需的结果，然后使用calc正确定位它。这在Safari中正常工作。

＆＃13;

＆＃13;

#container {
  width: 300px;
  height: 300px;
  display: block;
  border: 1px solid black;
  background-color: grey;
  overflow: hidden;
}

#overlay {
  border-color: blue;
  border-radius: 100%;
  border-style: solid;
  border-width: 200px;
  display: block;
  height: 200%;
  margin-left: -200px;
  margin-top: calc(-200px - 100%);
  position: relative;
  width: 200%;
}

＆＃13;

<div id="container">
  <div id="overlay"></div>
</div>

＆＃13;

＆＃13;

＆＃13;