給原生HTML變個樣其實這是一個改變默認HTML元素樣式的css，而且不需要添加額外class！在網上其實有很多更改默認樣式的css庫，但是大多需要添加class，那么多class每次還需要查文檔，萬一寫上頭忘記加，一看頁面，一個大大的白眼送給自己。

其實只需要在自己的項目中引用一個css文件即可，而且提供了三種主題：

1、Automatic：根據頁面中設置的prefers-color-scheme自動識別開啟深夜模式

<link rel="stylesheet" >

2、Dark theme：深夜模式

<link rel="stylesheet" >

3、Light theme：默認的正常白天模式

<link rel="stylesheet" >

下面我們就來列舉一些谷歌中 默認樣式 and 美容后 的樣式對比

1、一般輸入框

<input type="text">

2、只讀輸入框

<input type="text" readonly placeholder="readonly輸入框">

3、禁用輸入框

<input type="text" disabled placeholder="disabled輸入框">

4、textarea輸入框

<textarea placeholder="這是一個textarea"></textarea>

5、單選框

<input id="radioDemo" type="radio"> <label for="radioDemo">單選框</label>

6、復選框

<input id="checkboxDemo" type="checkbox"> <label for="checkboxDemo">復選框</label>

7、按鈕

<input type="submit"> <input type="button" value="按鈕">

8、滾動條

當然，water.css并不只對以上的內容進行了美化。當我們不想花費太長時間做一個demo頁面，但又不想做的太丑時，就可以選擇試一試這個css，最重要的是，不需要添加額外class呀！閉眼寫就完事了！

上一篇

長沙前端培訓機構分享：CSS的特性之層疊性

下一篇

千鋒長沙java培訓分享之Java開發需要用到的軟件