使用 CSS 去掉 iPhone 网页上按钮的超大圆角默认样式

使用 iPhone 上的浏览器去浏览网页的时候，按钮总是显示超大圆角的样式，显得超级恶心，但是我们自己定义 border-radius 为 0 也无法去除这个圆角，经过搜索发现这是 webikt 内核浏览器通过私有属性 -webkit-appearance 对控件设置了默认样式。

我们只要对按钮设置这个属性，并设置为 ‘none’ 就可以取消浏览器对于控件的默认样式。

input {-webkit-appearance:none; /*去除input默认样式*/}

另外这个属性也有个神奇的地方，它可以用来调用显示浏览器对各种控件的默认样式，总共有如下几个效果（将一个 Span 标签应用不同的 -webkit-appearance 效果）：

-webkit-appearance	效果
-webkit-appearance: button	SPAN Tag
-webkit-appearance: button-bevel	SPAN Tag
-webkit-appearance: caret	SPAN Tag
-webkit-appearance: checkbox	SPAN Tag
-webkit-appearance: listbox	SPAN Tag
-webkit-appearance: listitem	SPAN Tag
-webkit-appearance: menulist	SPAN Tag
-webkit-appearance: menulist-button	SPAN Tag
-webkit-appearance: menulist-text	SPAN Tag
-webkit-appearance: menulist-textfield	SPAN Tag
-webkit-appearance: push-button	SPAN Tag
-webkit-appearance: radio	SPAN Tag
-webkit-appearance: scrollbarbutton-down	SPAN Tag
-webkit-appearance: scrollbarbutton-left	SPAN Tag
-webkit-appearance: scrollbarbutton-right	SPAN Tag
-webkit-appearance: scrollbarbutton-up	SPAN Tag
-webkit-appearance: scrollbargripper-horizontal	SPAN Tag
-webkit-appearance: scrollbargripper-vertical	SPAN Tag
-webkit-appearance: scrollbarthumb-horizontal	SPAN Tag
-webkit-appearance: scrollbarthumb-vertical	SPAN Tag
-webkit-appearance: scrollbartrack-horizontal	SPAN Tag
-webkit-appearance: scrollbartrack-vertical	SPAN Tag
-webkit-appearance: searchfield	SPAN Tag
-webkit-appearance: searchfield-cancel-button	SPAN Tag
-webkit-appearance: searchfield-decoration	SPAN Tag
-webkit-appearance: searchfield-results-button	SPAN Tag
-webkit-appearance: searchfield-results-decoration	SPAN Tag
-webkit-appearance: slider-horizontal	SPAN Tag
-webkit-appearance: slider-vertical	SPAN Tag
-webkit-appearance: sliderthumb-horizontal	SPAN Tag
-webkit-appearance: sliderthumb-vertical	SPAN Tag
-webkit-appearance: square-button	SPAN Tag
-webkit-appearance: textarea	SPAN Tag
-webkit-appearance: textfield	SPAN Tag