CSS3的新增屬性及其用法

   現現在,隨着 Web2.0 技術的流行,以前的 CSS2 標準和相關技術彷佛已經知足不了日益增加的開發需求:人們須要實現更加美觀、用戶體驗更好的界面。CSS3,這個新一代的標準應運而生。爲了知足現有的對於 Web UI 的開發需求,它提供了一系列強大的功能,如許多新的 CSS 屬性(文字,佈局,顏色等等),各類 CSS 特效,甚至還支持 CSS 動畫、元素的變換。這些 CSS 新特性在現階段能夠說都是很是強大和完善的,您只須要加入幾行簡單的 CSS 代碼即可以實現出一系列使人眼前一亮的效果,這比咱們以前用 JavaScript 去模擬這樣的效果要好得多,不只下降了複雜度,變得易維護,在性能上也日新月異了。這篇文章將主要來介紹 CSS3 的新特性以及一些使用上的技巧。web

簡介:chrome

CSS 即層疊樣式表(Cascading Stylesheet)。Web 開發中採用 CSS 技術,能夠有效地控制頁面的佈局、字體、顏色、背景和其它效果。只須要一些簡單的修改,就能夠改變網頁的外觀和格式。CSS3 是 CSS 的升級版本,這套新標準提供了更加豐富且實用的規範,如:盒子模型、列表模塊、超連接方式、語言模塊、背景和邊框、文字特效、多欄佈局等等,目前有不少瀏覽器已經相繼支持這項升級的規範,如:Firefox、Chrome、Safari、Opera 等等。在 Web 開發中採用 CSS3 技術將會顯著的美化咱們的應用程序,提升用戶體驗,同時也能極大的提升程序的性能。本文將重點介紹一些比較絢麗且實用 CSS3 新特性。瀏覽器

1、CSS3 選擇器(Selector)

寫過 CSS 的人應該對 CSS 選擇器不陌生,咱們所定義的 CSS 屬性之因此能應用到相應的節點上,就是由於 CSS 選擇器模式。參考下述代碼:服務器

清單 1. CSS 選擇器案例
 Body > .mainTabContainer  div  > span[5]{ 
 Border: 1px solod red; 
 Background-color: white; 
 Cursor: pointer; 
 }

此處的 CSS 選擇器即:「body > .mainTabContainer div span[5]」 表明這這樣一條路徑:佈局

1. 「body」標籤直接子元素裏 class 屬性值爲「mainTabContainer」的全部元素 A性能

2. A 的後代元素(descendant)裏標籤爲 div 的全部元素 B字體

3. B 的直接子元素中的第 5 個標籤爲 span 的元素 Cflex

這個 C 元素(可能爲多個)即爲選擇器定位到的元素,如上的 CSS 屬性也會所有應用到 C 元素上。動畫

以上爲 CSS2 及以前版本所提供的主要定位方式。如今,CSS3 提供了更多更加方便快捷的選擇器:url

清單 2. CSS3 選擇器案例
 Body > .mainTabContainer  tbody:nth-child(even){ 
 Background-color: white; 
 } 

 Body > .mainTabContainer  tr:nth-child(odd){ 
 Background-color: black; 
 } 


 :not(.textinput){ 
 Font-size: 12px; 
      } 

      Div:first-child{ 
      Border-color: red; 
      }

如上所示,咱們列舉了一些 CSS3 的選擇器,在咱們平常的開發中可能會常常用到,這些新的 CSS3 特性解決了不少咱們以前須要用 JavaScript 腳本才能解決的問題。

tbody: nth-child(even), nth-child(odd):此處他們分別表明了表格(tbody)下面的偶數行和奇數行(tr),這種樣式很是適用於表格,讓人能很是清楚的看到表格的行與行之間的差異,讓用戶易於瀏覽。

: not(.textinput):這裏即表示全部 class 不是「textinput」的節點。

div:first-child:這裏表示全部 div 節點下面的第一個直接子節點。

除此以外,還有不少新添加的選擇器:

 E:nth-last-child(n) 
 E:nth-of-type(n) 
 E:nth-last-of-type(n) 
 E:last-child 
 E:first-of-type 
 E:only-child 
 E:only-of-type 
 E:empty 
 E:checked 
 E:enabled 
 E:disabled 
 E::selection 
 E:not(s)

這裏不一一介紹。學會利用這些新特性能夠極大程度的減小咱們的無畏代碼,而且大幅度的提升程序的性能。

2、@Font-face 特性

Font-face 能夠用來加載字體樣式,並且它還可以加載服務器端的字體文件,讓客戶端顯示客戶端所沒有安裝的字體。

先來看一個客戶端字體簡單的案例:

清單 3. Font-face 客戶端字體案例
 <p><font face="arial">arial courier verdana</font></p>

咱們能夠經過這種方式直接加載字體樣式,由於這些字體(arial)已經安裝在客戶端了。清單 3 這種寫法的做用等同於清單 4:

清單 4. 字體基本寫法
 <p><font style="font-family: arial">arial courier verdana</font></p>

相信這種寫法你們應該再熟悉不過了。

接下來咱們看看如何使用服務端字體,即:未在客戶端安裝的字體樣式。

參看以下代碼:

清單 5. Font-face 服務端字體案例
 @font-face { 
 font-family: BorderWeb; 
 src:url(BORDERW0.eot); 
 } 
 @font-face { 
 font-family: Runic; 
 src:url(RUNICMT0.eot); 
 } 

 .border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" } 
 .event { FONT-SIZE: 110px; COLOR: black; FONT-FAMILY: "Runic" }

清單 5 中聲明的兩個服務端字體,其字體源指向「BORDERW0.eot」和「RUNICMT0.eot」文件,並分別冠以「BorderWeb」和「Runic」的字體名稱。聲明以後,咱們就能夠在頁面中使用了:「 FONT-FAMILY: "BorderWeb" 」 和 「 FONT-FAMILY: "Runic" 」。

這種作法使得咱們在開發中若是須要使用一些特殊字體,而又不肯定客戶端是否已安裝時,即可以使用這種方式。

3、Word-wrap & Text-overflow 樣式

Word-wrap

先來看看 word-wrap 屬性,參考下述代碼:

清單 6. word-wrap 案例
 <div style="width:300px; border:1px solid #999999; overflow: hidden"> 
 wordwrapbreakwordwordwrapbreakwordwordwrapbreakwordwordwrapbreakword 
 </div> 


 <div style="width:300px; border:1px solid #999999; word-wrap:break-word;"> 
 wordwrapbreakwordwordwrapbreakwordwordwrapbreakwordwordwrapbreakword 
 </div>

比較上述兩段代碼,加入了「word-wrap: break-word」,設置或檢索噹噹前行超過指定容器的邊界時是否斷開轉行,文字此時已被打散。因此可見以下的差異:

Text-overflow

知道了 word-wrap 的原理,咱們再來看看 text-overflow,其實它與 word-wrap 是協同工做的,word-wrap 設置或檢索噹噹前行超過指定容器的邊界時是否斷開轉行,而 text-overflow 則設置或檢索噹噹前行超過指定容器的邊界時如何顯示,見以下示例:

清單 7. Text-overflow 案例
 .clip{text-overflow:clip; overflow:hidden; white-space:nowrap; 
   width:200px;background:#ccc;} 
 .ellipsis{text-overflow:ellipsis; overflow:hidden; white-space:nowrap; 
   width:200px; background:#ccc;} 

 <div class="clip"> 
  不顯示省略標記,而是簡單的裁切條
 </div> 

 <div class="ellipsis"> 
  當對象內文本溢出時顯示省略標記
 </div>

如清單 7 所示,這裏咱們均使用「overflow: hidden」,對於「text-overflow」屬性,有「clip」和「ellipsis」兩種可供選擇。見圖 3 的效果圖。

圖 3. Text-overflow 效果圖

圖 3. Text-overflow 效果圖

這裏咱們能夠看到,ellipsis 的顯示方式比較人性化,clip 方式比較傳統,咱們能夠依據需求進行選擇。

4、文字渲染(Text-decoration)

CSS3 裏面開始支持對文字的更深層次的渲染,咱們來看看下面的例子:

清單 8. Text-decoration 案例
 div { 
 -webkit-text-fill-color: black; 
 -webkit-text-stroke-color: red; 
 -webkit-text-stroke-width: 2.75px; 
 }

這裏咱們主要以 webkit 內核瀏覽器爲例,清單 8 的代碼效果如圖 4:

Text-fill-color: 文字內部填充顏色

Text-stroke-color: 文字邊界填充顏色

Text-stroke-width: 文字邊界寬度

5、CSS3 的多列布局(multi-column layout)

CSS3 如今已經能夠作簡單的佈局處理了,這個 CSS3 新特性又一次的減小了咱們的 JavaScript 代碼量,參考以下代碼:

清單 9. CSS3 多列布局
 .multi_column_style{ 
 -webkit-column-count: 3; 
 -webkit-column-rule: 1px solid #bbb; 
 -webkit-column-gap: 2em; 
 } 

 <div class="multi_column_style"> 
 ................. 
 ................. 
 </div>

這裏咱們仍是以 webkit 內核瀏覽器爲例:

Column-count:表示佈局幾列。

Column-rule:表示列與列之間的間隔條的樣式

Column-gap:表示列於列之間的間隔

6、邊框和顏色(color, border)

關於顏色,CSS3 已經提供透明度的支持了:

清單 10. 顏色的透明度
 color: rgba(255, 0, 0, 0.75); 
 background: rgba(0, 0, 255, 0.75);

這裏的「rgba」屬性中的「a」表明透明度,也就是這裏的「0.75」,同時 CSS3 還支持 HSL 顏色聲明方式及其透明度:

清單 11. HSL 的透明度
 color: hsla( 112, 72%, 33%, 0.68);

對於 border,CSS3 提供了圓角的支持:

清單 12. 圓角案例
 border-radius: 15px;

7、CSS3 的漸變效果(Gradient)

線性漸變

左上(0% 0%)到右上(0% 100%)即從左到右水平漸變:

清單 13. 左到右的漸變
 background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));

這裏 linear 表示線性漸變,從左到右,由藍色(#2A8BBE)到紅色(#FE280E)的漸變。

同理,也能夠有從上到下,任何顏色間的漸變轉換:

還有複雜一點的漸變,如:水平漸變,33% 處爲綠色,66% 處爲橙色:

清單 14. 複雜線性漸變
 background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),
        color-stop(0.33,#AAD010),color-stop(0.33,#FF7F00),to(#FE280E));

這裏的「color-stop」爲拐點,可見效果圖:

徑向漸變

接下來咱們要介紹徑向漸變(radial),這不是從一個點到一個點的漸變,而從一個圓到一個圓的漸變。不是放射漸變而是徑向漸變。來看一個例子:

清單 15. 徑向漸變(目標圓半徑爲 0)
 backgroud: 
 -webkit-gradient(radial,50 50,50,50 50,0,from(black),color-stop(0.5,red),to(blue));

前面「50,50,50」是起始圓的圓心座標和半徑,「50,50,0」藍色是目標圓的圓心座標和半徑,「color-stop(0.5,red)」是斷點的位置和色彩。這裏須要說明一下,和放射由內至外不同,徑向漸變恰好相反,是由外到內的漸變。清單 15 標識的是兩個同心圓,外圓半徑爲 50px,內圓半徑爲 0,那麼就是從黑色到紅色再到藍色的正圓形漸變。下面就是這段代碼的效果:

清單 16. 徑向漸變(目標圓半徑非 0)
 backgroud: 
 -webkit-gradient(radial,50 50,50,50 50,10,from(black),color-stop(0.5,red),to(blue));

這裏咱們給目標圓半徑爲 10會有一個半徑爲 10 的純藍的圓在最中間,這就是設置目標圓半徑的效果。

如今我再改變一下,再也不是同心圓了,內圓圓心向右 20px 偏移。

清單 17. 徑向漸變(目標圓圓心偏移)
 backgroud: 
 -webkit-gradient(radial,50 50,50,70 50,10,from(black),color-stop(0.5,red),to(blue));

這裏咱們給目標圓半徑仍是 10,可是圓心偏移爲「70,50」(起始圓圓心爲「50,50」)

想必您明白原理了,咱們能夠作一個來自頂部的漫射光,相似於開了盞燈:

清單 18. 徑向漸變(漫射光)
 backgroud:-webkit-gradient(radial,50 50,50,50 1,0,from(black),to(white));

8、CSS3 的陰影(Shadow)和反射(Reflect)效果

首先來講說陰影效果,陰影效果既可用於普通元素,也可用於文字,參考以下代碼:

清單 19. 元素和文字的陰影
 .class1{ 
 text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5); 
 } 

 .class2{ 
 box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3); 
 }

設置很簡單,對於文字陰影:表示 X 軸方向陰影向右 5px,Y 軸方向陰影向下 2px, 而陰影模糊半徑 6px,顏色爲 rgba(64, 64, 64, 0.5)。其中偏移量能夠爲負值,負值則反方向。元素陰影也相似。

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

設置也很簡單,你們主要關注「-webkit-box-reflect: below 10px」,他表示反射在元素下方 10px 的地方,再配上漸變效果。

9、CSS3 的背景效果

CSS3 多出了幾種關於背景(background)的屬性,咱們這裏會簡單介紹一下:

首先:「Background Clip」,該屬肯定背景畫區,有如下幾種可能的屬性:

* background-clip: border-box; 背景從 border 開始顯示 ;

* background-clip: padding-box; 背景從 padding 開始顯示 ;

* background-clip: content-box; 背景顯 content 區域開始顯示 ;

* background-clip: no-clip; 默認屬性,等同於 border-box;

一般狀況,咱們的背景都是覆蓋整個元素的,如今 CSS3 讓您能夠設置是否必定要這樣作。這裏您能夠設定背景顏色或圖片的覆蓋範圍。

其次:「Background Origin」,用於肯定背景的位置,它一般與 background-position 聯合使用,您能夠從 border、padding、content 來計算 background-position(就像 background-clip)。

* background-origin: border-box; 從 border. 開始計算 background-position;

* background-origin: padding-box; 從 padding. 開始計算 background-position;

* background-origin: content-box; 從 content. 開始計算 background-position;

還有,「Background Size」,經常使用來調整背景圖片的大小,注意別和 clip 弄混,這個主要用於設定圖片自己。有如下可能的屬性:

* background-size: contain; 縮小圖片以適合元素(維持像素長寬比)

* background-size: cover; 擴展元素以填補元素(維持像素長寬比)

* background-size: 100px 100px; 縮小圖片至指定的大小 .

* background-size: 50% 100%; 縮小圖片至指定的大小,百分比是相對包 含元素的尺寸 .

最後,「Background Break」屬性,CSS3 中,元素能夠被分紅幾個獨立的盒子(如使內聯元素 span 跨越多行),background-break 屬性用來控制背景怎樣在這些不一樣的盒子中顯示。

* background-break: continuous; 默認值。忽略盒之間的距離(也就是像元 素沒有分紅多個盒子,依然是一個總體一 樣)

* background-break: bounding-box; 把盒之間的距離計算在內;

* background-break: each-box; 爲每一個盒子單獨重繪背景。

這種屬性讓您能夠設定複雜元素的背景屬性。

最爲重要的一點,CSS3 中支持多背景圖片,參考以下代碼:

清單 21. 多背景圖片
 div { 
 background: url(src/zippy-plus.png) 10px center no-repeat,
  url(src/gray_lines_bg.png) 10px center repeat-x; 
 }

此爲同一元素兩個背景的案例,其中一個重複顯示,一個不重複。參考一下效果圖:

10、CSS3 的盒子模型

盒子模型爲開發者提供了一種很是靈活的佈局方式,可是支持這一特性的瀏覽器並很少,目前只有 webkit 內核的新版本 safari 和 chrome 以及 gecko 內核的新版本 firefox。

下面咱們來介紹一下他是如何工做的,參考以下代碼:

清單 22. CSS3 盒子模型
 <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>

默認狀況下,若是「boxcontainer」和「item」兩個 class 裏面沒有特殊屬性的話,因爲 div 是塊狀元素,因此他的排列應該是這樣的:

 
清單 23. CSS3 盒子模型(水平排列)
 .boxcontainer { 
                width: 1000px; 
                display: -webkit-box; 
                display: -moz-box; 
                -webkit-box-orient: horizontal; 
                -moz-box-orient: horizontal; 
            } 
            
            .item { 
                background: #357c96; 
                font-weight: bold; 
                margin: 2px; 
                padding: 20px; 
                color: #fff; 
                font-family: Arial, sans-serif; 
            }

注意這裏的「display: -webkit-box; display: -moz-box;」,它針對 webkit 和 gecko 瀏覽器定義了該元素的盒子模型。注意這裏的「-webkit-box-orient: horizontal;」,他表示水平排列的盒子模型。細心的讀者會看到,「盒子」的右側多出來了很大一塊,這是怎麼回事呢?讓咱們再來看一個比較有特色的屬性:「flex」

清單 24. CSS3 盒子模型(flex)
 <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> 

 .flex { 
     -webkit-box-flex: 1; 
     -moz-box-flex: 1; 
 }

您看到什麼區別了沒?在第四個「item 元素」那裏多了一個「flex」屬性,第四個「item 元素」填滿了整個區域,這就是「flex」屬性的做用。若是咱們調整一下「box-flex」的屬性值,並加入更多的元素,見以下代碼:

清單 25. CSS3 盒子模型(flex 進階)
 <div class="boxcontainer"> 
            <div class="item"> 
                1 
            </div> 
            <div class="item"> 
                2 
            </div> 
            <div class="item flex2"> 
                3 
            </div> 
            <div class="item flex"> 
                4 
            </div> 
        </div> 

 .flex { 
     -webkit-box-flex: 1; 
     -moz-box-flex: 1; 
 } 

 .flex2 { 
     -webkit-box-flex: 2; 
     -moz-box-flex: 2; 
 }

咱們把倒數第二個元素(元素 3)也加上「box-flex」屬性,並將其值設爲 2元素 3 和元素 4 按比例「2:1」的方式填充外層「容器」的餘下區域,這就是「box-flex」屬性的進階應用。

還有,「box-direction」能夠用來翻轉這四個盒子的排序,「box-ordinal-group」能夠用來改變每一個盒子的位置:一個盒子的 box-ordinal-group 屬性值越高,就排在越後面。盒子的對方方式能夠用「box-align」和「box-pack」來設定。

11、CSS3 的 Transitions, Transforms 和 Animation

Transitions

先說說 Transition,Transition 有下面些具體屬性:

transition-property:用於指定過渡的性質,好比 transition-property:backgrond 就是指 backgound 參與這個過渡

transition-duration:用於指定這個過渡的持續時間

transition-delay:用於制定延遲過渡的時間

transition-timing-function:用於指定過渡類型,有 ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

可能您以爲摸不着頭腦,其實很簡單,咱們用一個例子說明,參看一下以下代碼:

清單 26. CSS3 的 Transition
 <div id="transDiv" class="transStart"> transition </div> 

 .transStart { 
    background-color: white; 
    -webkit-transition: background-color 0.3s linear; 
    -moz-transition: background-color 0.3s linear; 
    -o-transition: background-color 0.3s linear; 
    transition: background-color 0.3s linear; 
 } 
 .transEnd { 
    background-color: red; 
 }

這裏他說明的是,這裏 id 爲「transDiv」的 div,當它的初始「background-color」屬性變化時(被 JavaScript 修改),會呈現出一種變化效果,持續時間爲 0.3 秒,效果爲均勻變換(linear)。如:該 div 的 class 屬性由「transStart」改成「transEnd」,其背景會由白(white)漸變到紅(red)。

Transform

再來看看 Transform,其實就是指拉伸,壓縮,旋轉,偏移等等一些圖形學裏面的基本變換。見以下代碼:

清單 27. CSS3 的 Transform
 .skew { 
 -webkit-transform: skew(50deg); 
 } 

 .scale { 
 -webkit-transform: scale(2, 0.5); 
 } 

 .rotate { 
 -webkit-transform: rotate(30deg); 
 } 

 .translate { 
 -webkit-transform: translate(50px, 50px); 
 } 

 .all_in_one_transform { 
 -webkit-transform: skew(20deg) scale(1.1, 1.1) rotate(40deg) translate(10px, 15px); 
 }

「skew」是傾斜,「scale」是縮放,「rotate」是旋轉,「translate」是平移。最後須要說明一點,transform 支持綜合變換。可見其效果圖以下:

圖 20. CSS3 的 Transform 效果圖
圖 20. CSS3 的 Transform 效果圖

如今您應該明白 Transform 的做用了吧。結合咱們以前談到的 Transition,將它們二者結合起來,會產生相似旋轉,縮放等等的效果,絕對能使人耳目一新。

Animation

最後,咱們來講說 Animation 吧。它能夠說開闢了 CSS 的新紀元,讓 CSS 脫離了「靜止」這一約定俗成的前提。以 webkit 爲例,見以下代碼:

清單 28. CSS3 的 Animation
 @-webkit-keyframes anim1 { 
    0% { 
        Opacity: 0; 
 Font-size: 12px; 
    } 
    100% { 
        Opacity: 1; 
 Font-size: 24px; 
    } 
 } 
 .anim1Div { 
    -webkit-animation-name: anim1 ; 
    -webkit-animation-duration: 1.5s; 
    -webkit-animation-iteration-count: 4; 
    -webkit-animation-direction: alternate; 
    -webkit-animation-timing-function: ease-in-out; 
 }

首先,定義動畫的內容,如清單 28 所示,定義動畫「anim1」,變化方式爲由「透明」(opacity: 0)變到「不透明」(opacity: 1),同時,內部字體大小由「12px」變到「24px」。而後,再來定義 animation 的變化參數,其中,「duration」表示動畫持續時間,「iteration-count」表示動畫重複次數,direction 表示動畫執行完一次後方向的變化方式(如第一次從右向左,第二次則從左向右),最後,「timing-function」表示變化的模式。

其實,CSS3 動畫幾乎支持全部的 style 變化,能夠定義各類各樣的動畫效果以知足咱們用戶體驗的須要。

這裏,咱們介紹了 CSS3 的主要的新特性,這些特性在 Chrome 和 Safari 中基本都是支持的,Firefox 支持其中的一部分,IE 和 Opera 支持的較少。讀者們能夠根據集體狀況有選擇的使用。

相關文章
相關標籤/搜索