30个值得收藏的CSS代码片段

这里收集了30个非常有用的CSS代码片段，非常值得大家去收藏，以备不时之需。

1、创建跨浏览器的图像灰度
如何将图片制作为灰度图片，而且在所有的浏览器中都表现一致呢？答案是结合使用

svg

和

filter

过滤器。

2、元素垂直居中
要使一个元素相对于它的父元素垂直居中需要使用一些小技巧。

更多关于元素垂直居中的资料可以参考：《使用3行CSS代码使任何元素垂直居中》

3、背景渐变动画
通常情况下，元素的渐变背景是不能制作动画效果的，你可以使用下面的代码来实现这个动画效果。实际上它是使用修改背景图片位置的方法来实现这个效果的。

查看下面的效果演示：

The Button

Transition

4、为超链接添加个性样式
有时候我们需要为不同的超链接设置不同的样式，使用户能够一眼就看出这个超链接的作用。下面的CSS代码将不同的超链接设置为不同的颜色，并为每个超链接设置不同的小图标。

效果如下面所示：

Hello, Here i will share Google Material Design eBook.

You can going to my website or drop me Email for more info.

5、表格列宽自适应
要调整一个的表格的列宽是一件非常头疼的事情。你可以为

td

元素设置

white-space: nowrap;

，让文本在表格中自适应。

查看下面表格的前后比较效果。

非主动列宽的表格

1	Mr. John Doe	United States of America	2014
2	Mr. Paul Jones	New Zealand	2013

自动列宽的表格

1	Mr. John Doe	United States of America	2014
2	Mr. Paul Jones	New Zealand	2013

5、经典的CSS清除浮动

6、最新的CSS清除浮动方法

7、制作跨浏览器的透明度

具体效果如下：

8、制作模糊文字

效果如下：

这是一些模糊文本。

更多关于模糊文字的资料请参考：《使用CSS制作跨浏览器的模糊文字效果》。

9、用CSS实现LOADING省略号动画
这段CSS代码使用CSS3的帧动画来模拟loading文字后面的3个小省略号的动画效果。

看一看下面loading文字后面的小省略号的动画效果。

Loading
10、不同弧度的圆角

11、通用媒体查询

12、自定义文本选择
正常情况下用鼠标选择一段文本是呈现蓝底白字的效果，使用下面的代码可以改变它们。

DEMO:用鼠标选择这里的文字看看效果。

13、图片边框效果
下面的代码可以为你的图片添加漂亮的带阴影的边框效果。



14、CSS全屏背景图片
全屏图片主要使用的是CSS的

background-size

属性。关于该属性的详细介绍可以参考：《使用一行CSS代码生成全屏背景图像》。

15、CSS3渐变模板

16、@FONT-FACE模板

17、CSS3 斑马线

18、元素内阴影效果

19、元素外阴影效果

20、CSS3多列文本布局

21、FOOTER固定在页面的顶部
你是否曾经想将页面的脚部固定在网页的底部呢？下面的代码可以帮你实现，并且添加了对IE6的支持。

22、IE6的PNG透明修复
在IE6中，PNG图片无法显示透明像素。使用下面的代码可以修复这个BUG。

23、设置跨浏览器的元素最小高度

24、修改输入框的边框样式

查看下面的例子，鼠标选中输入框看看边框效果。

没有修改样式的输入框：

修改样式的输入框：

25、强制换行

26、在所有可点击的元素使用手形鼠标样式

27、在可打印的网页中显示URLS

28、禁用移动WEBKIT的选择高亮

29、CSS3国际象棋棋盘格背景图案

30、纯CSS3纸张阴影特效

http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201506011951.html