在實際開發中，移動Web頁面的設計風格更接近App(手機應用)，而不是傳統的網頁。為了有更好的用戶體驗，我們可以給移動Web頁面設置一些特殊樣式。下面為列舉在移動Web開發中經常會設置的特殊樣式，具體如表1所示。

表1 移動端特殊樣式

需要注意的是，上述樣式是非標準的，因此加上了私有前綴“-webkit-”，該前綴在WebKit和Blink內核的瀏覽器中有效，適用于Chrome瀏覽器和大多數移動端瀏覽器。

為了讓讀者更好地理解，下面我們通過例2-5進行案例演示。

【例2-5】

(1)創建C:\web\chapter02\demo05.html文件，具體代碼如下。

上述代碼中，第8 ~ 10行代碼設置a標簽樣式中的-webkit-tap-highlight-color的值為transparent，表示當單擊這個超鏈接時，清除單擊高亮效果;第11~13行代碼設置按鈕樣式中的-webkit-appearance的值為none，用來去除按鈕的原生樣式。

(2)在瀏覽器中打開demo05.html，運行結果如圖1所示。

在圖1中，按鈕的默認樣式已經被取消。當用戶單擊超鏈接時，不會顯示超鏈接的背景顏色。讀者可以嘗試移除特殊樣式，對比添加和移除后的區別。

本文來自千鋒教育，轉載請注明出處。

總結

以上是生活随笔為你收集整理的列举在Web前端开发中经常会设置的特殊样式！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。