在為移動裝置製作網頁的過程中，你可能會遇到下述奇怪的現象：當你為一個按鈕設定樣式，並在瀏覽器開啟模擬器檢視效果時，一切都很美好。
但當你使用真機測試時，你的按鈕卻變成了下面這個樣子：
而且即使你使用終極禁術 border-radius: 0 !important 也還是沒用。
這是因為在移動裝置中，各瀏覽器為一些基本控制元件（button，checkbox，scrollbarbutton-up）提供了一套符合原生系統介面風格的樣式，這些樣式是隱藏的，但優先順序卻是最高的，高到你即使使用禁術 !important 也無法超越。
這顯然不科學。
別怕，我們有兩個非常靠譜的樣式宣告可以告知瀏覽器完全拋棄控制元件預設的樣式，以正常的方式計算我們的樣式表。
這兩個宣告分別是：
-
-moz-appearance: none：用來取消基於Gecko引擎的瀏覽器（如Firefox）所提供的原生系統控制元件樣式； -
-webkit-appearance: none：用來取消基於Webkit（如 Safari）和Blink（如Chrome，Opera）引擎的瀏覽器所提供的原生系統控制元件樣式；
所以，你明白當你遇到文章開篇出現的奇怪現象應該怎麼做了吧？直接兩個宣告走起啊少年！
最後，你也許會好奇，appearance 還有什麼屬性值，戳這裡看看MDN上怎麼說吧。
PS: 戳這裡，發現更多可能。