本文介绍10个非常有用的CSS代码片段，绝对不容忽视。包括在整个容器中垂直对齐、元素拉伸为全屏高度、跨浏览器图像灰度、动画背景等，使用平率高，经常无法完全达到想要效果。现在有了这10个CSS代码片段，我们可以将这些效果做得更好。
1、垂直对齐
在使用CSS的时候，你可能会出现疑问，我如何在容器中将文本或元素垂直对齐。现在使用CSS3Transforms，我们可以更有效解决这问题，如下：
.verticalcenter{
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}使用这个技术，文本、段落等都可以垂直对齐，CSS3 Transform 支持Chrome 4, Opera 10, Safari 3,Firefox 3, Internet Explorer 9。
2、元素拉伸为全屏高度
一般来说，你可能会想要把元素拉伸为全屏高度，问本元素调整只会调整容器的大小，因此元素跨越整个窗口高度就需要在html 、body上做html,
body {
height: 100%;
}任何元素100%高度，如下：
div {
height: 100%;
}据文件格式引用不同样式
有时候你可能需要将特定的链接以不同颜色展现出来，来让他更容易被区分。下面的CSS片段将会为文本、链接添加图标，如下：
a[href^="http://"]{
padding-right: 20px;
background: url(external.gif) no-repeat center right;
}
a[href^="mailto:"]{
padding-right: 20px;
background: url(email.png) no-repeat center right;
}
a[href$=".pdf"]{
padding-right: 20px;
background: url(pdf.png) no-repeat center right;
}效果如下：
Hello, Here i will share Google Material Design eBook. You can going
to my website or drop me Email for more info.
4、跨浏览器图像灰度
灰度可以为网站提供更深的基调使其看起来更优雅简约。这里我们使用SVG为图片添加一个慧都过滤器。
使用 filter属性跨浏览器：
img {
filter: url(filters.svg#grayscale);
filter: gray;
-webkit-filter: grayscale(1);
}5、动画背景
CSS最诱人的功能之一—添加动画效果。我们可以将背景颜色、透明度、大小等做成动画效果。但是梯度效果却不行。现在我们可以使用以下代码来实现。
button {
background-image: linear-gradient(#5187c4, #1c2f45);
background-size: auto 200%;
background-position: 0 100%;
transition: background-position 0.5s;
}
button:hover {
background-position: 0 0;
}效果：
The Button Transition
6、CSS 列表自动宽度
表格调整列宽时间麻烦的事情。不过也可以轻松解决，在td元素中使用
white-space: nowrap：
td {
white-space: nowrap;
}效果：
Non Autowidth Table
1 Mr. John Doe United States of America 2014
2 Mr. Paul Jones New Zealand 2013
Autowidth Table
1 Mr. John Doe United States of America 2014
2 Mr. Paul Jones New Zealand 2013
7、显示阴影
想要添加阴影，那就试试这个代码吧，可以在任意边添加阴影。要完成此项，首相，确定盒子的长宽，使用:after伪元素，放置到正确位置，代码如下：
.box-shadow {
background-color: #FF8020;
width: 160px;
height: 90px;
margin-top: -45px;
margin-left: -80px;
position: absolute;
top: 50%;
left: 50%;
}
.box-shadow:after {
content: "";
width: 150px;
height: 1px;
margin-top: 88px;
margin-left: -75px;
display: block;
position: absolute;
left: 50%;
z-index: -1;
-webkit-box-shadow: 0px 0px 8px 2px #000000;
-moz-box-shadow: 0px 0px 8px 2px #000000;
box-shadow: 0px 0px 8px 2px #000000;
}效果：
Edit in JSFiddle
JavaScript
HTML
CSS
Result
8、长文本封装
如果你的文本内容比容器还长，那下面这个代码就对你很有帮助了。
10个不可忽视的CSS代码片段
使用CSS适应容器宽度：
pre {
white-space: pre-line;
word-wrap: break-word;
}效果
10个不可忽视的CSS代码片段
9、模糊文本
想让文本有模糊效果？就这两步： color transparent、添加text-shadow ：
.blurry-text {
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}this text is so blurry.
10、使用CSS制作动画省略号
在加载的时候来个动画效果如何？
.loading:after {
overflow: hidden;
display: inline-block;
vertical-align: bottom;
animation: ellipsis 2s infinite;
content: "\2026";
}
@keyframes ellipsis {
from {
width: 2px;
}
to {
width: 15px;
}
}效果：
Loading…
来自：慧都控件网
链接：http://www.evget.com/article/2014/11/27/21871.html