边框半径和框阴影在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屋!