边框半径和框阴影在Android 2.3.6中没有效果 [英] Border radius and box shadow have no effect in Android 2.3.6

问题描述

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

I ran my Phonegap app in three devices, Android 2.3.6, Android 3 and iOS7 . The problem is that on the Android 2.3.6 I see that the switch button using the jQuery switchery plugin is square instead of being rounded, as it renders in the other phones.

无法执行：

• 使用跨浏览器边框半径（例如-web-kit，-moz等） li>
  
• 添加了！important
添加了重要的

• Use cross browser border radius (e.g. -web-kit, -moz, etc.)
• Added !important

切换器jquery插件的圆形代码：

The code of the rounded switch from switchery jquery plugin:

.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;

}

推荐答案

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

According to you posted code, it seems you've missed the vendor-prefixes for box-shadow property.

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

Android 2.1-3.2 (and iOS 3.2-4.3) needs the -webkit- prefix to get the box-shadow to work:

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

此外，为了使用 border-radius ，您需要将圆的半径设置为框尺寸的一半（宽度或高度）。

Also, in order to create a circle by using border-radius, you need to set the radius of the circle as the half of the box dimension (width or height).

因此，您应该使用以下：

Hence, you should use the following:

border-radius: 15px;

对于 Android 2.1和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;
}

这篇关于边框半径和框阴影在Android 2.3.6中没有效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！