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浏览器中，是否有一个技巧可以在圆的顶部获得漂亮的黑色圆形边框，并在圆的底部获得漂亮的红色圆形边框。我在Safari和iPhone的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%;
}

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

在圆形元素上使用上下边框时，iOS CSS问题

1 个答案: