底部边框 + 边框半径不起作用 Galaxy S4答案

【问题标题】：bottom-border + border-radius not working Galaxy S4底部边框 + 边框半径不起作用 Galaxy S4
【发布时间】：2015-02-17 00:19:23
【问题描述】：

这是使用 phonegap/cordova 制作的，模拟器来自 Genymotion。

我试图在底部添加一个边框，然后将边缘变圆，所以我得到这样的结果：

如您所见，它在 Google Nexus 7 模拟器上运行良好。但是当我尝试在通用的 android 手机模拟器上运行它时，它会变成这样：

盒子的相关（无动画）css代码是这样的：

width:90%;
height:39%;
margin:6% auto;
position:relative;
border-bottom:solid 20px black;
border-bottom-right-radius:50px;
border-bottom-left-radius:50px;
-moz-border-bottom-right-radius:50px;
-moz-border-bottom-left-radius:50px;
-webkit-border-bottom-right-radius:50px;
-webkit-border-bottom-left-radius:50px;
-ms-border-bottom-right-radius:50px;
-ms-border-bottom-left-radius:50px;
-khtml-border-bottom-right-radius:50px;
-khtml-border-bottom-left-radius:50px;
-moz-border-top-right-radius:50px;
-moz-border-top-left-radius:50px;
-webkit-border-top-right-radius:50px;
-webkit-border-top-left-radius:50px;
-ms-border-top-right-radius:50px;
-ms-border-top-left-radius:50px;
-khtml-border-top-right-radius:50px;
-khtml-border-top-left-radius:50px;
font-size:6em;
text-align:center;

【问题讨论】：

标签： android css cordova

【解决方案1】：

我记得 -khtml 等于 -webkit（和 -apple 也是），所以你应该只使用 -webkit 供应商。 -khtml 专用于 konqueror - linux kde 浏览器，我认为在 android 设备上没用，-ms 也是。

尝试更改 css 声明的顺序。在最后放置没有 verndors、纯边界底部等的声明。

如果可以，请在实时设备上测试您的代码。

【讨论】：