在圆形元素上使用顶部和底部边框时的 iOS CSS 问题

Question

我在 iPhone 上遇到了一个 CSS 错误，希望有人知道修复/破解。

当创建一个圆形元素（border-radius:50%）并添加一个底部边框和一个顶部边框时，底部边框也将用于顶部，除了尖端。

Example of top-border and bottom-border used together on iOS

Example of top-border and bottom-border used together on Android

在 iPhone 浏览器中，有什么技巧可以在顶部获得漂亮的黑色圆形边框，在圆圈的底部获得漂亮的红色圆形边框。我在 iPhone 上的 Safari 和 Google Chrome 中都看到了这一点。

为了完全透明，这是我在这里运行的代码：

<style>
   #circle {
     border-radius:50%;
     background-color:green;
     border-top:1px dotted black;
     border-bottom:1px solid red;
     height:200px;
     width:200px;
   }
</style>
<div id="circle"></div>

Answer 1

这是 Safari webkit 的一个已知问题。您必须自己创建一个解决方法。这是我通过 WKWebView 在 iPhone 上创建和测试的一种方法：

<div class="circle-wrapper">
    <div class="half-circle"></div>
    <div class="circle"></div>
</div>

.circle {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 100%;
    border: 4px dotted black;
    background-color: lightblue;
    position: absolute;
}

.half-circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 100px;
    border-radius: 100px 100px 0 0;
    border: 4px dotted white;
    background-color: lightblue;
    z-index: 10;
    background-color: #a20000;
    transform-origin: bottom center;
    transform: rotate(180deg);
}

.circle-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

正如我所说，这是一种适合您的方法，因为在此示例中，虚线边框通过直径显示。