边框半径和框阴影在 Android 2.3.6 中无效答案

【问题标题】：Border radius and box shadow have no effect in Android 2.3.6边框半径和框阴影在 Android 2.3.6 中无效
【发布时间】：2014-02-22 12:10:51
【问题描述】：

我在 Android 2.3.6、Android 3 和 iOS7 这三个设备上运行了我的 Phonegap 应用程序。问题是在 Android 2.3.6 上，我看到使用 jQuery switchery 插件的切换按钮是方形的，而不是圆形的，因为它在其他手机中呈现。

我做过但没有成功的事情：

使用跨浏览器边界半径（例如 -web-kit、-moz 等）
添加了 !important

switchery jquery插件的圆角开关代码：

.switchery>small {
 background: #fff;
 border-radius: 100%;
 -webkit-border-radius: 100%; 
 border-radius: 100%;
-moz-border-radius: 20px; 
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
height: 30px;
position: absolute;
top: 0;
width: 30px;

}

我无法使用开发者工具来调试设备上的 css。

【问题讨论】：

你试过-webkit-box-shadow吗？它适用于Android浏览器2.1+，另外为了创建一个圆圈，你应该使用border-radius: 50%;
好的，box-shadow 现在可以工作了，但是不能得到圆圈，当使用border-radius 50% 时我得到空白空间
border-radius: 15px; 怎么样？（Android 2.1 和 iOS 3.2 也需要-webkit- 前缀）
嗨，Idan，你应该试试这个。border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;
是的，它工作 15px，你可以，我会接受！谢谢 - 你知道为什么在旧版本上会这样吗？有链接吗？

标签： android cordova css

【解决方案1】：

根据您发布的代码，您似乎错过了 box-shadow 属性的供应商前缀。

Android 2.1-3.2（和 iOS 3.2-4.3）需要 -webkit- 前缀才能使 box-shadow 工作：

-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.4);

另外，为了使用border-radius创建一个圆，您需要将圆的半径设置为盒子尺寸（宽度或高度）的一半。

因此，您应该使用以下内容：

border-radius: 15px;

对于Android 2.1 and iOS 3.2，需要-webkit- 前缀。

齐心协力

.switchery > small {
  background: #fff;

  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.4);
          box-shadow: 0 1px 3px rgba(0,0,0,0.4);

  height: 30px;
  width: 30px;

  -webkit-border-radius: 15px; /* 30px / 2 */
  border-radius: 15px;         /* 30px / 2 */

  position: absolute;
  top: 0;
}

【讨论】：

@IdanShechter 别提了 :)