使用appframework前端框架中输入框圆角问题

目前使用HTML5技术来开发手机跨平台app已经成为了曾经的web开发人员介入移动开发的一条捷径。与此对应也出现了很多新的技术来支撑这样的开发方式，例如国外的phonegap和国内的APPcan等。很多移动端的前端UI框架也层出不穷，其原理都是大同小异，无非都是提供了一些常用的UI组件及其使用demo和js/ajax的API等。其实相对于原生开发，HTML5技术虽然开发成本和周期较小，但是效率上还是有很大差别的。所以选择前端框架就非常重要，如果框架太过于重量级，那么在手机上的表现将是灾难（实际上加载很慢，卡顿现象较多）。例如之前的jQuerymobile，虽然Jquery大名鼎鼎，但是其移动端框架效率确实不敢恭维。我一般使用其重写版appframework(JQMobi)框架，这个框架很轻，一般应用表现还是可以的。

今天使用了它里面的一个input开发一个用户登录界面，发现它的圆角input输入框在真机上是存在bug的，打开其CSS一看，发现它的input样式是这样设置的

对于圆角显示效果是通过border-radius来实现的，这种方式在PC端是没有问题的，但是在安卓手机上，如果你整个页面设置了背景或者背景颜色，显示效果将是矩形框里面有个圆角border，解决这个问题的方法是

给这个样式添加background-clip:padding-box;属性，这样在真机上显示就没有问题了,如果设置了这个属性还有显示问题的话是因为这个background-clip属性发生了冲突，继承了父容器的一个css,只需要在其后面添加!important来提高其优先级即可。