現現在,隨着 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 新特性。瀏覽器
寫過 CSS 的人應該對 CSS 選擇器不陌生,咱們所定義的 CSS 屬性之因此能應用到相應的節點上,就是由於 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
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)
這裏不一一介紹。學會利用這些新特性能夠極大程度的減小咱們的無畏代碼,而且大幅度的提升程序的性能。
Font-face 能夠用來加載字體樣式,並且它還可以加載服務器端的字體文件,讓客戶端顯示客戶端所沒有安裝的字體。
先來看一個客戶端字體簡單的案例:
<p><font face="arial">arial courier verdana</font></p>
咱們能夠經過這種方式直接加載字體樣式,由於這些字體(arial)已經安裝在客戶端了。清單 3 這種寫法的做用等同於清單 4:
<p><font style="font-family: arial">arial courier verdana</font></p>
相信這種寫法你們應該再熟悉不過了。
接下來咱們看看如何使用服務端字體,即:未在客戶端安裝的字體樣式。
參看以下代碼:
@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" 」。
這種作法使得咱們在開發中若是須要使用一些特殊字體,而又不肯定客戶端是否已安裝時,即可以使用這種方式。
先來看看 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」,設置或檢索噹噹前行超過指定容器的邊界時是否斷開轉行,文字此時已被打散。因此可見以下的差異:
知道了 word-wrap 的原理,咱們再來看看 text-overflow,其實它與 word-wrap 是協同工做的,word-wrap 設置或檢索噹噹前行超過指定容器的邊界時是否斷開轉行,而 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 效果圖
這裏咱們能夠看到,ellipsis 的顯示方式比較人性化,clip 方式比較傳統,咱們能夠依據需求進行選擇。
CSS3 裏面開始支持對文字的更深層次的渲染,咱們來看看下面的例子:
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: 文字邊界寬度
CSS3 如今已經能夠作簡單的佈局處理了,這個 CSS3 新特性又一次的減小了咱們的 JavaScript 代碼量,參考以下代碼:
.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:表示列於列之間的間隔
關於顏色,CSS3 已經提供透明度的支持了:
color: rgba(255, 0, 0, 0.75); background: rgba(0, 0, 255, 0.75);
這裏的「rgba」屬性中的「a」表明透明度,也就是這裏的「0.75」,同時 CSS3 還支持 HSL 顏色聲明方式及其透明度:
color: hsla( 112, 72%, 33%, 0.68);
對於 border,CSS3 提供了圓角的支持:
border-radius: 15px;
左上(0% 0%)到右上(0% 100%)即從左到右水平漸變:
background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));
這裏 linear 表示線性漸變,從左到右,由藍色(#2A8BBE)到紅色(#FE280E)的漸變。
同理,也能夠有從上到下,任何顏色間的漸變轉換:
還有複雜一點的漸變,如:水平漸變,33% 處爲綠色,66% 處爲橙色:
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),這不是從一個點到一個點的漸變,而從一個圓到一個圓的漸變。不是放射漸變而是徑向漸變。來看一個例子:
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,那麼就是從黑色到紅色再到藍色的正圓形漸變。下面就是這段代碼的效果:
backgroud: -webkit-gradient(radial,50 50,50,50 50,10,from(black),color-stop(0.5,red),to(blue));
這裏咱們給目標圓半徑爲 10會有一個半徑爲 10 的純藍的圓在最中間,這就是設置目標圓半徑的效果。
如今我再改變一下,再也不是同心圓了,內圓圓心向右 20px 偏移。
backgroud: -webkit-gradient(radial,50 50,50,70 50,10,from(black),color-stop(0.5,red),to(blue));
這裏咱們給目標圓半徑仍是 10,可是圓心偏移爲「70,50」(起始圓圓心爲「50,50」)
想必您明白原理了,咱們能夠作一個來自頂部的漫射光,相似於開了盞燈:
backgroud:-webkit-gradient(radial,50 50,50,50 1,0,from(black),to(white));
首先來講說陰影效果,陰影效果既可用於普通元素,也可用於文字,參考以下代碼:
.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)。其中偏移量能夠爲負值,負值則反方向。元素陰影也相似。
.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 的地方,再配上漸變效果。
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 中支持多背景圖片,參考以下代碼:
div { background: url(src/zippy-plus.png) 10px center no-repeat, url(src/gray_lines_bg.png) 10px center repeat-x; }
此爲同一元素兩個背景的案例,其中一個重複顯示,一個不重複。參考一下效果圖:
盒子模型爲開發者提供了一種很是靈活的佈局方式,可是支持這一特性的瀏覽器並很少,目前只有 webkit 內核的新版本 safari 和 chrome 以及 gecko 內核的新版本 firefox。
下面咱們來介紹一下他是如何工做的,參考以下代碼:
<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 是塊狀元素,因此他的排列應該是這樣的:
.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」
<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」的屬性值,並加入更多的元素,見以下代碼:
<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」來設定。
先說說 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
可能您以爲摸不着頭腦,其實很簡單,咱們用一個例子說明,參看一下以下代碼:
<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,其實就是指拉伸,壓縮,旋轉,偏移等等一些圖形學裏面的基本變換。見以下代碼:
.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 支持綜合變換。可見其效果圖以下:
如今您應該明白 Transform 的做用了吧。結合咱們以前談到的 Transition,將它們二者結合起來,會產生相似旋轉,縮放等等的效果,絕對能使人耳目一新。
最後,咱們來講說 Animation 吧。它能夠說開闢了 CSS 的新紀元,讓 CSS 脫離了「靜止」這一約定俗成的前提。以 webkit 爲例,見以下代碼:
@-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 支持的較少。讀者們能夠根據集體狀況有選擇的使用。