.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%;
}

3、根據文件格式引用不同樣式

有時候你可能需要將特定的鏈接以不同顏色展現出來，來讓他更容易被區分。下面的CSS片段將會為文本、鏈接添加圖標，如下：

a[href^="//"]{
padding-right: 20px;
background: url(external.gif) no-repeat center right;
}
/* emails */
a[href^="mailto:"]{
padding-right: 20px;
background: url(email.png) no-repeat center right;
}

/* pdfs */
a[href$=".pdf"]{
padding-right: 20px;
background: url(pdf.png) no-repeat center right;
}

效果如下：

5、跨瀏覽器圖像灰度

灰度可以為網站提供更深的基調使其看起來更優雅簡約。這里我們使用SVG為圖片添加一個慧都過濾器。

<svg xmlns="//www.w3.org/2000/svg">
<filter id="grayscale">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
</filter>
</svg>

使用 filter屬性跨瀏覽器：

img {
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
}

6、動畫背景

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;
}

效果：

6、CSS 列表自動寬度

表格調整列寬時間麻煩的事情。不過也可以輕松解決，在td元素中使用white-space: nowrap：

td {
white-space: nowrap;
}

效果：

<iframe width=&quot;100%" height="300" src="//jsfiddle.net/agusesetiyono/1uotj8wv/3/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

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;
}

效果：

8、長文本封裝

如果你的文本內容比容器還長，那下面這個代碼就對你很有幫助了。

使用CSS適應容器寬度：

pre {
white-space: pre-line;
word-wrap: break-word;
}

效果

9、模糊文本

想讓文本有模糊效果？就這兩步： color transparent、添加text-shadow ：

.blurry-text {
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

10、使用CSS制作動畫省略號

在加載的時候來個動畫效果如何？

.loading:after {
overflow: hidden;
display: inline-block;
vertical-align: bottom;
animation: ellipsis 2s infinite;
content: "\2026"; /* ascii code for the ellipsis character */
}
@keyframes ellipsis {
from {
width: 2px;
}
to {
width: 15px;
}
}

效果：

英文：

轉載請注明：文章轉載自：慧都控件網 
原文地址：10個不可忽視的CSS代碼片段