最近看资料时，无意间看到了GitHub上有一个css项目竟然达到了6k的star量，瞬间提起了兴趣

 

　　GitHub地址戳这里：https://github.com/kognise/water.css

 

　　既然提起了兴趣，那果断去了解一下，看名称本以为是一个动画库，但是看下来才发现这是一个改变默认HTML元素样式的css，而且不需要添加额外class！！

 

　　在网上其实有很多更改默认样式的css库，但是大多需要添加class，那么多class每次还需要查文档，万一写上头忘记加，一看页面，一个大大的白眼送给自己

 

　　官方的演示demo地址在这里：

 

　　https://watercss.kognise.dev/

 

　　​watercss.kognise.dev/

 

　　只需要在自己的项目中引用一个css文件即可，而且提供了三种主题

 

　　1、Automatic：根据页面中设置的prefers-color-scheme自动识别开启深夜模式

 

　　<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">

 

　　2、Dark theme：深夜模式

 

　　<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/dark.css">

 

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

 

　　<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/light.css">

 

　　下面我们就来列举一些谷歌中 默认样式 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呀！闭眼写就完事了！

 

　　好了好了，话不多少，赶紧去试一试吧