- 相關(guān)推薦
淺析CSS3的新功能和新特性
目前很多已經(jīng)存在的新功能和特性正在被提出至CSS3。于是小編將在此嘗試展示其中的一些內(nèi)容，希望對(duì)大家有所幫助。邊框
border-color 屬性
boder-image 屬性
border-radius 屬性
box-shadow 屬性
背景
background-origin 屬性和 background-clip 屬性
background-size 屬性
多重背景
顏色
HSL 顏色值
HSLA 顏色值
opacity 屬性
RGBA 顏色值
文字效果
text-shadow 屬性
text-overflow 屬性
word-wrap 屬性
用戶界面
box-sizing 屬性
resize 屬性
outline 屬性
nav-top、nav-right、nav-bottom、nav-left 屬性
選擇器
屬性(attribute)選擇器
基本盒模型
overflow-x 屬性和 overflow-y 屬性
生成的內(nèi)容
content 屬性
其它模塊
media queries 模塊
multi-column layout 模塊
Web 字體模塊
Speech 模塊
如何通過(guò)CSS3創(chuàng)建彩色的邊框
W3C已經(jīng)在CSS3中為邊框提供了一些新的選項(xiàng)，這些選項(xiàng)即圓角邊框、邊框顏色之后，也是非常有趣的。Mozilla/Firefox已經(jīng)實(shí)現(xiàn)了這個(gè)允許你創(chuàng)建很酷的彩色邊框的函數(shù)
Border-image：在你的邊框中使用圖片
另一個(gè)令人興奮的CSS3中新的邊框特性是border-image屬性。有了這個(gè)特性你可以定義一個(gè)圖片以取代普通邊框。這個(gè)特性實(shí)際上可分為一對(duì)屬性：border-image和border-corner-image。這兩個(gè)值可以縮寫，如下：
border-image:
border-top-image
border-right-image
border-bottom-image
border-left-image
border-corner-image:
border-top-left-image
border-top-right-image
border-bottom-left-image
border-bottom-right-image border-image目前已經(jīng)在Safari和Firefox 3.1 (Alpha)下工作了。語(yǔ)法如下：
或
Border-radius：用CSS創(chuàng)建圓角邊框!
W3C已經(jīng)在CSS3中提供了一些新的選項(xiàng)，border-radius是其中之一，Mozilla/Firefox和Safari 3都已經(jīng)實(shí)現(xiàn)了這個(gè)允許你創(chuàng)建圓角盒模型的函數(shù)。例如：
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
這些不同的角可以被分別控制，代碼如下：
-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius
Box-shadow，CSS3的最牛逼的新特性之一
CSS3背景和邊框模塊擁有一個(gè)非常好的新特性名叫box-shadow，它已經(jīng)在Safari 3+和Firefox 3.1 (Alpha)中得以實(shí)現(xiàn)。其規(guī)則提及了多重陰影，但是作者已經(jīng)對(duì)此提出了質(zhì)疑，并且Safari 3并沒(méi)有將其實(shí)現(xiàn)。
此屬性由3個(gè)長(zhǎng)度參數(shù)和一個(gè)顏色參數(shù)組成，其中長(zhǎng)度參數(shù)有：
1. 陰影的橫向位移量，正值意味著陰影靠右，負(fù)值則靠左;
2. 陰影的縱向位移量，負(fù)值意味著陰影靠上，正值則靠下;
3. 褪色漸變半徑，如果值為0則陰影會(huì)被直接切斷，值越高褪色漸變的效果就越明顯。例如：
box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;
此陰影會(huì)被僅靠圓角邊框的圓角而創(chuàng)建，例如：
box-shadow: -10px -10px 0px #000;
border-radius: 5px;
padding: 5px 5px 5px 15px;
background-origin和background-clip
Mozilla、Safari 3和Konqueror都已經(jīng)實(shí)驗(yàn)性實(shí)現(xiàn)了CSS3中的background-origin屬性和background-clip屬性。Opera在上一個(gè)公開版本中有一個(gè)穩(wěn)定的、基于早期Opera 2.3中背景和邊框規(guī)范的基礎(chǔ)實(shí)現(xiàn)。
background-origin屬性用來(lái)決定如何在盒模型中計(jì)算background-position的值。
此屬性有三種取值：border-box、padding-box和content-box。如果你使用了padding-box，則背景的位置計(jì)算會(huì)相對(duì)于內(nèi)邊距區(qū)域的左上角;border-box則相對(duì)于邊框的左上角;content-box則相對(duì)于其內(nèi)容的左上角。基于Gecko或Webkit的瀏覽器使用了過(guò)時(shí)的規(guī)范版本，其取值為border、padding和content。
background-clip屬性用來(lái)決定背景是否要擴(kuò)展到邊框里。默認(rèn)值是border-box，即擴(kuò)展到邊框里。但如果將其賦值padding-box則不會(huì)。如果你使用content-box則背景只會(huì)在有內(nèi)容的矩形區(qū)域顯示(這個(gè)可選值已經(jīng)在最近的規(guī)范中去掉了)。
實(shí)驗(yàn)性實(shí)現(xiàn)的代碼如下：
-webkit-background-origin / -moz-background-origin
-webkit-background-clip / -moz-background-clip
穩(wěn)定實(shí)現(xiàn)的代碼如下：
background-origin
background-clip
Background-size
CSS3給了你一種定義背景圖片尺寸的方式。你可以通過(guò)背景圖片寬高的像素值或百分比進(jìn)行定義。當(dāng)你使用百分比進(jìn)行定義時(shí)，其圖片尺寸是相對(duì)于其盒模型通過(guò)background-origin定義的區(qū)域的長(zhǎng)和寬的。
實(shí)現(xiàn)這一特性的瀏覽器有Opera 9.5、Safari 3、Firefox和Konqueror。他們分別使用-o-background-size、-webkit-background-size和-khtml-background-size、-moz-background-size屬性。
通過(guò)CSS3實(shí)現(xiàn)多重背景
CSS3允許同一個(gè)元素中有多個(gè)背景圖片。你可以用逗號(hào)將不同的背景定義分隔開已定義多重背景。比如：
目前已經(jīng)實(shí)現(xiàn)這一屬性的瀏覽器有：Webkit和KHTML (Konqueror)。
HSL顏色值
跟使用16進(jìn)制的RGB(紅、綠、藍(lán))顏色值一樣，CSS3也可以識(shí)別HSL(色相、飽和度、亮度)顏色值。
HSL顏色值有三個(gè)參數(shù)：
色相是指色盤的度數(shù)，0度或360度是紅色，120度是綠色，240度是藍(lán)色。我們可以在0度到360度之間取值以表示不同的色調(diào)。
飽和度值是一個(gè)百分?jǐn)?shù)，100%表示完全飽和的顏色。
亮度值也是一個(gè)百分?jǐn)?shù)，0%表示全黑，100%表示全白，50%則表示中間值。
這種顏色值為我們確定可用顏色和風(fēng)格提供了一個(gè)非常廣闊的空間。
現(xiàn)如今，HSL已經(jīng)被Opera 9.5、Safari 3、Konqueror和Mozilla瀏覽器所實(shí)現(xiàn)。
HSLA顏色值
HSLA與HSL的關(guān)系跟RGBA與RGB的關(guān)系一樣，即這里允許出現(xiàn)第四個(gè)參數(shù)，以表示其透明度(通過(guò)Alpha通道)。
在截稿時(shí)，只有Safari 3和Firefox 3 Beta支持HSLA顏色值。
Opacity
Opacity是目前為止最廣泛實(shí)現(xiàn)的CSS3特性。這大概也是我們最期待的特性。
RGBA顏色值
CSS3已經(jīng)添加了一個(gè)顏色賦值的新特性。即RGB之后你現(xiàn)在也可以使用RGBA。這個(gè)"A"指的就是你猜測(cè)的alpha(透明度)。這個(gè)新特性允許我們定義顏色的透明度。它讓網(wǎng)頁(yè)工程師的日子變得輕松許多。
如今，這個(gè)特性已經(jīng)在Safari 3和Firefox 3 pre-alpha中得以實(shí)現(xiàn)。
Text-shadow：用CSS實(shí)現(xiàn)類似Photoshop的特效
當(dāng)我們需要實(shí)現(xiàn)一個(gè)簡(jiǎn)單的陰影的時(shí)候，CSS3最終消除了我們對(duì)Photoshop的需求。text-shadow屬性可以被如下方式使用：
各個(gè)參數(shù)和box-shadow的參數(shù)表意一致。
目前Webkit、Opera 9.5、Firefox 3.1 (pre-Alpha)、Konqueror、iCab已經(jīng)實(shí)現(xiàn)這一特性。
注：這個(gè)特性并不是CSS3的新特性，而是CSS2提出的。Safari從第1個(gè)版本就有這個(gè)特性了。
Text-overflow
有的時(shí)候文本不得不被切割。比如當(dāng)其溢出元素的矩形區(qū)域的時(shí)候。一旦這樣的現(xiàn)象出現(xiàn)，你就需要一個(gè)視覺(jué)上的暗示，告訴用戶文本被截?cái)嗔�。這時(shí)我們引入了text-overflow-props。最普遍的方式就是通過(guò)省略號(hào)來(lái)表示文本溢出，如規(guī)則中所說(shuō)，“當(dāng)前的字符表現(xiàn)可能有所不同”。Opera通過(guò)-o-text-overflow支持了這一特性。
支持這些特性現(xiàn)在變得很棘手。Webkit只支持text-overflow的簡(jiǎn)寫方式，且這些特性只是部分實(shí)現(xiàn)。text-overflow: ellipsis-word; 和 text-overflow: inherit; 并沒(méi)有工作。搞笑的是Internet Explorer從IE6開始支持了這一特性。具體參照：
text-overflow: ellipsis;
text-overflow: clip;
text-overflow: ellipsis-word;
Word-wrap
Word-wrap屬性已經(jīng)被微軟發(fā)明并加入了CSS3中。它允許長(zhǎng)單詞在必要的情況下被截?cái)鄵Q行。
word-wrap: normal;
word-wrap: break-word
這個(gè)特性已經(jīng)在IE、Safari、Firefox 3.1 (Alpha)中得以實(shí)現(xiàn)。
Box-sizing：盒模型為簡(jiǎn)單應(yīng)用做了擴(kuò)展
一直不完全理解盒模型?CSS3提供了一個(gè)叫做box-sizing的新的屬性，這個(gè)屬性讓我們改變?yōu)g覽器在計(jì)算元素寬度方面的特性。默認(rèn)情況下，box-sizing的值是content-box。在這種情況下，計(jì)算寬高時(shí)會(huì)遵照CSS2.1的相關(guān)規(guī)則，再加入邊框和內(nèi)邊距的寬高。如果把值設(shè)置為border-box，則你可以強(qiáng)制瀏覽器不按照規(guī)范中的寬高進(jìn)行渲染，而是把邊框和內(nèi)邊距直接算在盒模型內(nèi)。
Firefox已經(jīng)實(shí)現(xiàn)了這一特性，屬性名為-moz-box-sizing。Safari使用-webkit-box-sizing屬性名，Opera直接使用box-sizing屬性名。
CSS3中的resize屬性
總是希望元素可以由我們隨意調(diào)整大小?使用過(guò)很多亂七八糟的技巧?CSS3在用戶界面這部分提供了解決方案：resize屬性。它允許你定義盒模型是否可以調(diào)整大小。Webkit最新的深夜版本實(shí)現(xiàn)這一特性。
其中resize: both表示其寬度和高度都可以調(diào)整。同時(shí)還有resize: horizontal;和 resize: vertical;允許只調(diào)整寬度或只調(diào)整高度。還可以搭配max-width/min-width/max-height/min-height等屬性限制其調(diào)整的范圍。
Outline
Outlines已經(jīng)在CSS3中得到了擴(kuò)展，它包含了outline-offset屬性。這個(gè)屬性允許設(shè)置渲染輪廓線時(shí)向外位移的量。比如：
outline: 2px solid blue;
outline-offset: 12px;
這一特性目前已經(jīng)在Opera、Safari、Firefox下得以實(shí)現(xiàn)。
CSS3結(jié)點(diǎn)屬性(Attribute)選擇器
在W3C 2005年12月的草案中描述：
引用:
6.3.2 屬性選擇器的部分值匹配
我們提供了三個(gè)屬性選擇器用以部分匹配其屬性值
[att^=val]代表att屬性值包含“val”前綴的元素
[att$=val]代表att屬性值包含“val”后綴的元素
[att*=val]代表att屬性值包含“val”的元素
屬性值必須是標(biāo)示符或字符串。屬性名在選擇其中是否大小寫敏感取決于文檔語(yǔ)言。
Media Queries
CSS2增加了media="screen"的支持，通過(guò)這種方式我們定義了顯示數(shù)據(jù)用的樣式表。CSS3增加了一個(gè)這方面的新的特性，即media queries。
基本上，這意味著你可以基于不同的寬高的視圖區(qū)域改變樣式表。在更廣泛的領(lǐng)域中，這代表著規(guī)范中提到的：“通過(guò)使用Media Queries，其表現(xiàn)可以針對(duì)不同規(guī)格的輸出設(shè)備表現(xiàn)出不同的內(nèi)容。”
下面是有關(guān)min-width和max-width的兩個(gè)測(cè)試，當(dāng)前只在Safari 3、Opera和Firefox 3.1 (Alpha)中可用。無(wú)論如何這是未來(lái)的Web開發(fā)，它使得我們可以很輕松的同時(shí)在移動(dòng)或傳統(tǒng)設(shè)備中生成各自的頁(yè)面。
Multi-column layout
W3C提供了把文本按照?qǐng)?bào)紙一樣按列排版的方式。Multi-column layout自成一個(gè)模塊。它允許Web開發(fā)者通過(guò)兩種方式把文字填到欄目中：定義每列的寬度或定義列數(shù)。第一種方式可以由column-width屬性完成，第二種方式則由column-count完成。為了在欄目之間創(chuàng)建空白，你需要定義另一個(gè)屬性column-gap的寬度。
Multi-column layout當(dāng)前只有基于Mozilla的瀏覽器以及Safari 3支持，他們通過(guò)各自的前綴-moz-和-webkit-加以實(shí)現(xiàn)。下面的代碼用到了column-width：
-moz-column-width: 13em;
-moz-column-gap: 1em;
-webkit-column-width: 13em;
-webkit-column-gap: 1em;
還有一個(gè)例子是用到了column-count：
-moz-column-count: 3;
-moz-column-gap: 1em;
-moz-column-rule: 1px solid black;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
-webkit-column-rule: 1px solid black;
有一個(gè)已經(jīng)不再被支持的特性是column-space-destribution，曾經(jīng)用以描述如何劃分列間距。
通過(guò)@font-face定義Web字體
說(shuō)@font-face是CSS3的新特性并不準(zhǔn)確，CSS2就已經(jīng)第一次支持了這一特性，并且Internet Explorer早在第5個(gè)版本的時(shí)候就已經(jīng)支持它了。盡管如此，他們的實(shí)現(xiàn)方式是通過(guò)專有的eot(Embeded Open Type)字體格式，沒(méi)有別的瀏覽器決定使用這個(gè)格式。隨著Safari 3.1的發(fā)布，網(wǎng)站的發(fā)布者可以在網(wǎng)頁(yè)中使用任意持有證書的ttf(TrueType)字體文件或orf(OpenType)字體文件。
為了使用Web字體，每個(gè)字體表格必須使用@font-face規(guī)則。
@font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); }
@font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf'); }
CSS3 Speech
CSS2添加了聽(tīng)覺(jué)媒體類型的支持。這項(xiàng)支持用來(lái)定義在聽(tīng)覺(jué)設(shè)備中合成語(yǔ)音的“樣式”。本規(guī)則添加了幾個(gè)這種新媒體類型的屬性。
目前的CSS2.1草案提出了media="speech"的特性，但是沒(méi)有明確定義可以應(yīng)用的屬性。所以聽(tīng)覺(jué)媒體類型沒(méi)有被認(rèn)可。
CSS3的Speech模塊移除了一些老的屬性，添加了新的屬性。這些都分配在speech媒體類型中。
Opera是實(shí)現(xiàn)最多CSS3 Speech屬性的最流行的瀏覽器。
#voice-volume { -xv-voice-volume: x-soft; -xv-voice-balance: right; }
#voice-balance { -xv-voice-balance: left; }
#speech-cue { cue-after: url(ding.wav); }
#voice-rate { -xv-voice-rate: x-slow; }
#voice-family { voice-family: female; }
#voice-pitch { -xv-voice-pitch: x-low; }
#speech-speak { speak: spell-out; }
【淺析CSS3的新功能和新特性】相關(guān)文章：
污泥的分類和特性04-10
CSS3制作導(dǎo)航條和毛玻璃效果03-30
網(wǎng)球扣殺的特性和技巧03-26
關(guān)于HTML5的新特性介紹01-04
淺析人力資源新思考03-04
彈簧鋼的特性和應(yīng)用03-20
淺析雅思和托福的區(qū)別03-08
Word 2010的新功能介紹03-30