CSS3新特性概述

注意：由于CSS3中的部分內(nèi)容尚未完全定稿，所以本文的部分可能會隨時更新。

緣起

W3C的官方文檔于2011/9/29更新了Selectors Level 3。時至今日，已經(jīng)過去了將近4年的時間，各家瀏覽器廠商對CSS3的支持程度也越來越高。按理說作為一名前端從業(yè)人員不應(yīng)該等某項新技術(shù)普遍被支持后才去學(xué)習(xí)，但是由于一些個人的原因（半路出家的FE？懶惰？沒時間？），我還尚未對CSS3新增的新特性進(jìn)行過系統(tǒng)的學(xué)習(xí)。

CSS作為一名web前端開發(fā)人員的必備熟練技能，實在是不應(yīng)該成為自身技術(shù)棧的短板。此文便是博主學(xué)習(xí)CSS3新增特性的一個記錄，不過本文將不會詳細(xì)的闡述每一個新增特性，只作概述性的描述。（后面將會對每一項新增特性另作文章進(jìn)行描述）

新增特性

本文將CSS3新增的特性按照功能分為下面的幾個部分，

• 選擇器的拓展
• 頁面布局的加強
• 元素修飾的加強
• 開放字體的支持
• 多終端的適配
• 動畫支持

選擇器的拓展

CSS3新增了許多可使用的選擇器使得前端開發(fā)人員在選擇頁面元素時更加靈活。新增的選擇器包含如下幾個方面，

• 屬性選擇器
• 結(jié)構(gòu)偽類選擇器
• UI元素狀態(tài)偽類選擇器
• 目標(biāo)偽類選擇器
• 否定選擇器
• 通用兄弟選擇器

具體的不打算在本文展開敘述，可參考博主之前的這篇文章初識CSS3選擇器。

頁面布局的加強

多列布局方式

在以前，如果我們需要實現(xiàn)一個多列的頁面布局，往往采用的方案是浮動或者絕對定位。CSS3中新增了多列布局使得頁面布局更加靈活。

這里是多列布局的W3C官方文檔。CSS3中新增了相關(guān)的屬性column-count和column-width來設(shè)定具體的多列布局樣式。示例代碼如下，

<style>
    div {
        -webkit-column-count: 2;
        -webkit-column-width: 100px;
    }
</style>
<div>
    blablablabla....
</div>

效果如下圖，

在實際的使用中，我們往往僅需要設(shè)置column-count或者column-width其中的一個屬性就好，瀏覽器會自動根據(jù)可展示的空間對相應(yīng)的元素進(jìn)行分列或者設(shè)置每一列的寬度（從某種角度說，這也是一種自適應(yīng)）。

除了column-count或者column-width屬性之外，還有column-gap及column-rule屬性可供設(shè)置，如下示例代碼，

<style>
    div {
        -webkit-column-count: 3;
        -webkit-column-gap: 40px;
        -webkit-column-rule: 4px solid red
    }
</style>
<div>
    blablablabla....
</div>

其效果如下，

關(guān)于CSS3多列布局更加詳細(xì)的內(nèi)容，請參閱博主的這篇文章CSS3多列布局。

可變更的盒模型

我們知道W3C的CSS2.1規(guī)范中，默認(rèn)的盒模型在計算盒子的總大小的時候，元素的border和padding是被被加入到寬度和高度之中的。而IE系的老舊瀏覽器的行為恰恰與之相反。

CSS3規(guī)范提供了box-sizing屬性并允許設(shè)置瀏覽器使用的盒模型。

簡單來說box-sizing屬性提供了content-box和border-box兩種賦值來確定元素究竟使用哪一種盒模型。其中現(xiàn)代瀏覽器默認(rèn)的取值是content-box，既符合W3C標(biāo)準(zhǔn)的盒模型。關(guān)于box-sizing更多的內(nèi)容，請參與博主之前的一篇文章CSS盒模型科普#box-sizing屬性。

可伸縮的布局方式

CSS3引入了可以算是一種新的盒模型：彈性盒模型，該模型決定一個盒子在其他盒子中的分布方式以及如何處理可用的空間。

看下面的示例代碼，

<style>
    .boxcontainer { 
        width: 1000px; 
        display: -webkit-box; 
        display: -moz-box; 
        -webkit-box-orient: horizontal; 
        -moz-box-orient: horizontal; 
    } 
    .item { 
        background: blue; 
        font-weight: bold; 
        margin: 2px; 
        padding: 20px; 
        color: #fff; 
    }
    .flex { 
        -webkit-box-flex: 1; 
        -moz-box-flex: 1; 
    }
</style>
<div class="boxcontainer">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item flex">4</div> 
</div>

其展示如下，

關(guān)于彈性盒模型的更多內(nèi)容，請參閱博主的這篇文章CSS3彈性盒模型。

元素修飾的加強

CSS3提供一系列屬性來支持以前必須使用圖片或者js操作才能實現(xiàn)的效果，大大的提升了頁面展示效果的開發(fā)效率。

RGBA和透明度

CSS3提供rgba來支持為元素設(shè)置透明度。如下示例代碼，

div {
    color: rgba(255, 0, 0, 0.75); 
    background: hsla(112, 72%, 33%, 0.68);
}

從示例代碼可見，CSS3支持rgb和hsl兩種顏色聲明方式，最后一位參數(shù)即表示透明度，其取值范圍為0~1，0為完全透明1為完全不透明。

注意，使用rgba和opacity都能夠使得某元素變得透明，但是兩者有一個非常核心的區(qū)別，opacity屬性將某元素及其所有的子元素都應(yīng)用透明樣式，而rgba只在被設(shè)置的元素應(yīng)用透明樣式并不影響其子元素。

圓角支持

CSS3為圓角（border-radius）提供了更加一般的支持，

.border-radius {
    border-radius: 15px;
}

效果如下，

關(guān)于CSS3圓角的更多內(nèi)容，請參閱博主的這篇文章CSS3圓角。

多背景圖片支持

如果我們需要實現(xiàn)一系列背景圖片堆疊在一起，一般的做法可能是需要使用多個div元素進(jìn)行布局，通過調(diào)試每個div的背景樣式來達(dá)到堆疊的目的。

CSS3允許你使用多個屬性（background-*系列屬性），在某一個頁面元素上添加多層背景圖片。（有點類似PS中圖層的概念）

如下面的示例代碼，

div {   
    background: url(bg1.jpg) top left no-repeat,
        url(bg2.jpg) bottom left no-repeat,   
        url(bg3.jpg) center center repeat-y;   
}

這樣就可以在同一個div元素中應(yīng)用多個背景圖片。具體的實踐請參閱這篇文章CSS3背景。

漸變效果支持

CSS3中提供了漸變（gradient）的支持，所謂的漸變就是兩種或多種顏色之間的平滑過度。CSS3提供的漸變支持中又分為兩種，線性漸變和徑向漸變。

<style>
    .linear-gradient {
        width: 400px;
        height: 20px;
        background-image: -webkit-gradient(linear, 0% 0%,100% 0%, from(#2A8BBE),to(#FE280E));
    }
    .radial-gradient {
        width: 100px;
        height: 100px;
        background: -webkit-gradient(radial, 50 50, 50, 50 50, 0, from(blue), to(red));
    }
</style>
<div class="linear-gradient"></div>
<div class="radial-gradient"></div>

其效果如下下圖，

關(guān)于CSS3漸變的更多內(nèi)容，請參閱博主的這篇文章CSS3漸變。

陰影和反射效果

我們可以使用text-shadow和box-shadow來達(dá)到陰影的目的。

如下示例代碼，

.class1{ 
   text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5);
} 
.class2{ 
   box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);
}

其中text-shadow是針對文字進(jìn)行陰影設(shè)置，而box-shadow是針對容器元素進(jìn)行陰影設(shè)置。同時text-shadow和box-shadow都支持同時對一個元素設(shè)置多個陰影屬性（即所謂的多重陰影）。例如，

.class1{ 
    text-shadow:1px 1px 2px #c10ccc,
        1px 1px 2px #648cb4,
        1px 1px 6px #cc150c;
 }

效果如下，

再來談?wù)劮瓷湫Ч?，所謂的反射其實看起來就跟水中的倒影一樣，如下圖的效果，

其實它的設(shè)置很簡單，

.classReflect{ 
    -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.51))); 
}

關(guān)于CSS3中陰影和反射更多的內(nèi)容，請參閱博主的另一篇文章CSS3陰影和反射。

開放字體的支持

CSS3提供@font-face特性為頁面自定義字體的展示提供支持。通過@font-face你可以在頁面中嵌入不同的自定義字體，為不同的元素應(yīng)用不同的字體。

其一般用法如下，

/* 自定義字體 */
@font-face { 
    font-family: BorderWeb; 
    src:url(BORDERW0.eot); 
}
@font-face { 
    font-family: Runic; 
    src:url(RUNICMT0.eot); 
}
/* 為不同的元素應(yīng)用不同的字體 */
.border {
    font-family: "BorderWeb";
    font-size: 35px; color: black;
} 
.event {
    font-family: "Runic";
    font-size: 110px;
    color: black;
}

關(guān)于@font-face更多的內(nèi)容請參閱博主之前的另一篇文章WebFont與頁面ICON圖標(biāo)研究。

多終端的適配

之前為了適配不同的設(shè)備（主要是不同設(shè)備的屏幕不一樣），可能需要為不同設(shè)備準(zhǔn)備不同的css文件。CSS3提供了更加方便的方式，通過媒體查詢（media queries）可以讓你為不同的設(shè)備基于它們的能力定義不同的樣式。

比如，在可視區(qū)域小于480像素的時候，你可能想讓網(wǎng)站的側(cè)欄顯示在主內(nèi)容的下邊，這樣它就不應(yīng)該浮動并顯示在右側(cè)了，

#sidebar {   
    float: right;   
    display: inline; /* IE Double-Margin Bugfix */  
}   
@media all and (max-width:480px) {   
    #sidebar {   
        float: none;   
        clear: both;   
    }   
}

關(guān)于CSS3媒體查詢的更多內(nèi)容，請參閱博主的這篇文章CSS3媒體查詢。

動畫支持

web開發(fā)中要在頁面上實現(xiàn)動畫有許多種途徑。CSS3為我們提供了一系列方便的方法。在CSS3中，有如下三個關(guān)鍵字可以用來實現(xiàn)動畫，

• transition，意為過渡
• transform，意為變換
• animation，意為動畫

這三者之間稍有區(qū)別，關(guān)于他們更加詳細(xì)的用法，請參閱博主的這篇文章CSS動畫與@keyframes研究。