ios - 在圆形元素上使用顶部和底部边框时的 iOS CSS 问题
问题描述
我在 iPhone 上遇到了一个 CSS 错误,希望有人知道修复/破解。
当创建一个圆形元素 (border-radius:50%) 并添加一个底部边框和一个顶部边框时,除了尖端之外,底部边框也将用于顶部。
iOS 上一起使用的 top-border 和 bottom-border 示例
Android 上一起使用的 top-border 和 bottom-border 示例
在 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>
解决方案
这是 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%;
}
正如我所说,这是一种适合您的方法,因为在此示例中通过直径显示虚线边框。
推荐阅读
- python-3.x - 在while循环中附加变量值的最佳方法
- mysql - mysql GROUP BY 查询在电子邮件字段中显示部分匹配
- angularjs - 选择单选按钮 angularjs 1.7 时,ng-model 值不会改变
- node.js - 开发 Node.js 库时是否应该包括类型检查?
- django-rest-framework - 在查询集中django中选择一对多关系表
- apache-kafka - 架构注册表安全配置
- validation - Kotlin:在界面中指定输入约束
- r - 如何在R中绘制手动色标?
- python - 如何从包含另一个列表中的所有特定字符的列表中获取项目
- hadoop - 通过命令行在 mapreduce 作业中传递队列名称