Safari单侧边框半径未正确呈现

Question

我尝试使用border-bottom在div周围创建一个半圆边框来创建此效果：

它在chrome和firefox上正确渲染（虽然在Chrome开发工具中看起来是正确的，但是不能测试android）但是在safari 11.0.3和ios 11.2.6上你可以看到顶部边框出现。

HTML：

<div class="circle-border-wrapper">
    <div class="circle-border">
        <h3>{{ .heading }}</h3>
        <p>{{ .text }}</p>
    </div>
</div>

的CSS：

.circle-border-wrapper .circle-border:before {
  content: " ";
  position: absolute;
  left: 0;
  top: -66px;
  border-bottom: 8px solid #ea3dd3;
  border-radius: 50%;
  height: 187%;
  width: 100%;
}

有什么想法吗？

Answer 1

在我发现this answer解释了safari的问题之后，我找到了提供解决方案的this answer。