淺析CSS3的新功能和新特性

時間：2024-09-13 07:46:27 CSS3 我要投稿

相關(guān)推薦

淺析CSS3的新功能和新特性

　　目前很多已經(jīng)存在的新功能和特性正在被提出至CSS3。于是小編將在此嘗試展示其中的一些內(nèi)容，希望對大家有所幫助。

　　邊框

　　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 模塊

　　如何通過CSS3創(chuàng)建彩色的邊框

　　W3C已經(jīng)在CSS3中為邊框提供了一些新的選項，這些選項即圓角邊框、邊框顏色之后，也是非常有趣的。Mozilla/Firefox已經(jīng)實現(xiàn)了這個允許你創(chuàng)建很酷的彩色邊框的函數(shù)

　　Border-image：在你的邊框中使用圖片

　　另一個令人興奮的CSS3中新的邊框特性是border-image屬性。有了這個特性你可以定義一個圖片以取代普通邊框。這個特性實際上可分為一對屬性：border-image和border-corner-image。這兩個值可以縮寫，如下：

　　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)下工作了。語法如下：

　　或

　　Border-radius：用CSS創(chuàng)建圓角邊框!

　　W3C已經(jīng)在CSS3中提供了一些新的選項，border-radius是其中之一，Mozilla/Firefox和Safari 3都已經(jīng)實現(xiàn)了這個允許你創(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背景和邊框模塊擁有一個非常好的新特性名叫box-shadow，它已經(jīng)在Safari 3+和Firefox 3.1 (Alpha)中得以實現(xiàn)。其規(guī)則提及了多重陰影，但是作者已經(jīng)對此提出了質(zhì)疑，并且Safari 3并沒有將其實現(xiàn)。

　　此屬性由3個長度參數(shù)和一個顏色參數(shù)組成，其中長度參數(shù)有：

　　1. 陰影的橫向位移量，正值意味著陰影靠右，負值則靠左;

　　2. 陰影的縱向位移量，負值意味著陰影靠上，正值則靠下;

　　3. 褪色漸變半徑，如果值為0則陰影會被直接切斷，值越高褪色漸變的效果就越明顯。例如：

　　box-shadow: 10px 10px 5px #888;

　　padding: 5px 5px 5px 15px;

　　此陰影會被僅靠圓角邊框的圓角而創(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)實驗性實現(xiàn)了CSS3中的background-origin屬性和background-clip屬性。Opera在上一個公開版本中有一個穩(wěn)定的、基于早期Opera 2.3中背景和邊框規(guī)范的基礎(chǔ)實現(xiàn)。

　　background-origin屬性用來決定如何在盒模型中計算background-position的值。

　　此屬性有三種取值：border-box、padding-box和content-box。如果你使用了padding-box，則背景的位置計算會相對于內(nèi)邊距區(qū)域的左上角;border-box則相對于邊框的左上角;content-box則相對于其內(nèi)容的左上角�；贕ecko或Webkit的瀏覽器使用了過時的規(guī)范版本，其取值為border、padding和content。

　　background-clip屬性用來決定背景是否要擴展到邊框里。默認值是border-box，即擴展到邊框里。但如果將其賦值padding-box則不會。如果你使用content-box則背景只會在有內(nèi)容的矩形區(qū)域顯示(這個可選值已經(jīng)在最近的規(guī)范中去掉了)。

　　實驗性實現(xiàn)的代碼如下：

　　-webkit-background-origin / -moz-background-origin

　　-webkit-background-clip / -moz-background-clip

　　穩(wěn)定實現(xiàn)的代碼如下：

　　background-origin

　　background-clip

　　Background-size

　　CSS3給了你一種定義背景圖片尺寸的方式。你可以通過背景圖片寬高的像素值或百分比進行定義。當你使用百分比進行定義時，其圖片尺寸是相對于其盒模型通過background-origin定義的區(qū)域的長和寬的。

　　實現(xiàn)這一特性的瀏覽器有Opera 9.5、Safari 3、Firefox和Konqueror。他們分別使用-o-background-size、-webkit-background-size和-khtml-background-size、-moz-background-size屬性。

　　通過CSS3實現(xiàn)多重背景

　　CSS3允許同一個元素中有多個背景圖片。你可以用逗號將不同的背景定義分隔開已定義多重背景。比如：

　　目前已經(jīng)實現(xiàn)這一屬性的瀏覽器有：Webkit和KHTML (Konqueror)。

　　HSL顏色值

　　跟使用16進制的RGB(紅、綠、藍)顏色值一樣，CSS3也可以識別HSL(色相、飽和度、亮度)顏色值。

　　HSL顏色值有三個參數(shù)：

　　色相是指色盤的度數(shù)，0度或360度是紅色，120度是綠色，240度是藍色。我們可以在0度到360度之間取值以表示不同的色調(diào)。

　　飽和度值是一個百分數(shù)，100%表示完全飽和的顏色。

　　亮度值也是一個百分數(shù)，0%表示全黑，100%表示全白，50%則表示中間值。

　　這種顏色值為我們確定可用顏色和風格提供了一個非常廣闊的空間。

　　現(xiàn)如今，HSL已經(jīng)被Opera 9.5、Safari 3、Konqueror和Mozilla瀏覽器所實現(xiàn)。

　　HSLA顏色值

　　HSLA與HSL的關(guān)系跟RGBA與RGB的關(guān)系一樣，即這里允許出現(xiàn)第四個參數(shù)，以表示其透明度(通過Alpha通道)。

　　在截稿時，只有Safari 3和Firefox 3 Beta支持HSLA顏色值。

　　Opacity

　　Opacity是目前為止最廣泛實現(xiàn)的CSS3特性。這大概也是我們最期待的特性。

　　RGBA顏色值

　　CSS3已經(jīng)添加了一個顏色賦值的新特性。即RGB之后你現(xiàn)在也可以使用RGBA。這個"A"指的就是你猜測的alpha(透明度)。這個新特性允許我們定義顏色的透明度。它讓網(wǎng)頁工程師的日子變得輕松許多。

　　如今，這個特性已經(jīng)在Safari 3和Firefox 3 pre-alpha中得以實現(xiàn)。

　　Text-shadow：用CSS實現(xiàn)類似Photoshop的特效

　　當我們需要實現(xiàn)一個簡單的陰影的時候，CSS3最終消除了我們對Photoshop的需求。text-shadow屬性可以被如下方式使用：

　　各個參數(shù)和box-shadow的參數(shù)表意一致。

　　目前Webkit、Opera 9.5、Firefox 3.1 (pre-Alpha)、Konqueror、iCab已經(jīng)實現(xiàn)這一特性。

　　注：這個特性并不是CSS3的新特性，而是CSS2提出的。Safari從第1個版本就有這個特性了。

　　Text-overflow

　　有的時候文本不得不被切割。比如當其溢出元素的矩形區(qū)域的時候。一旦這樣的現(xiàn)象出現(xiàn)，你就需要一個視覺上的暗示，告訴用戶文本被截斷了。這時我們引入了text-overflow-props。最普遍的方式就是通過省略號來表示文本溢出，如規(guī)則中所說，“當前的字符表現(xiàn)可能有所不同”。Opera通過-o-text-overflow支持了這一特性。

　　支持這些特性現(xiàn)在變得很棘手。Webkit只支持text-overflow的簡寫方式，且這些特性只是部分實現(xiàn)。text-overflow: ellipsis-word; 和 text-overflow: inherit; 并沒有工作。搞笑的是Internet Explorer從IE6開始支持了這一特性。具體參照：

　　text-overflow: ellipsis;

　　text-overflow: clip;

　　text-overflow: ellipsis-word;

　　Word-wrap

　　Word-wrap屬性已經(jīng)被微軟發(fā)明并加入了CSS3中。它允許長單詞在必要的情況下被截斷換行。

　　word-wrap: normal;

　　word-wrap: break-word

　　這個特性已經(jīng)在IE、Safari、Firefox 3.1 (Alpha)中得以實現(xiàn)。

　　Box-sizing：盒模型為簡單應(yīng)用做了擴展

　　一直不完全理解盒模型?CSS3提供了一個叫做box-sizing的新的屬性，這個屬性讓我們改變?yōu)g覽器在計算元素寬度方面的特性。默認情況下，box-sizing的值是content-box。在這種情況下，計算寬高時會遵照CSS2.1的相關(guān)規(guī)則，再加入邊框和內(nèi)邊距的寬高。如果把值設(shè)置為border-box，則你可以強制瀏覽器不按照規(guī)范中的寬高進行渲染，而是把邊框和內(nèi)邊距直接算在盒模型內(nèi)。

　　Firefox已經(jīng)實現(xiàn)了這一特性，屬性名為-moz-box-sizing。Safari使用-webkit-box-sizing屬性名，Opera直接使用box-sizing屬性名。

　　CSS3中的resize屬性

　　總是希望元素可以由我們隨意調(diào)整大小?使用過很多亂七八糟的技巧?CSS3在用戶界面這部分提供了解決方案：resize屬性。它允許你定義盒模型是否可以調(diào)整大小。Webkit最新的深夜版本實現(xiàn)這一特性。

　　其中resize: both表示其寬度和高度都可以調(diào)整。同時還有resize: horizontal;和 resize: vertical;允許只調(diào)整寬度或只調(diào)整高度。還可以搭配max-width/min-width/max-height/min-height等屬性限制其調(diào)整的范圍。

　　Outline

　　Outlines已經(jīng)在CSS3中得到了擴展，它包含了outline-offset屬性。這個屬性允許設(shè)置渲染輪廓線時向外位移的量。比如：

　　outline: 2px solid blue;

　　outline-offset: 12px;

　　這一特性目前已經(jīng)在Opera、Safari、Firefox下得以實現(xiàn)。

　　CSS3結(jié)點屬性(Attribute)選擇器

　　在W3C 2005年12月的草案中描述：

　　引用:

　　6.3.2 屬性選擇器的部分值匹配

　　我們提供了三個屬性選擇器用以部分匹配其屬性值

　　[att^=val]代表att屬性值包含“val”前綴的元素

　　[att$=val]代表att屬性值包含“val”后綴的元素

　　[att*=val]代表att屬性值包含“val”的元素

　　屬性值必須是標示符或字符串。屬性名在選擇其中是否大小寫敏感取決于文檔語言。

　　Media Queries

　　CSS2增加了media="screen"的支持，通過這種方式我們定義了顯示數(shù)據(jù)用的樣式表。CSS3增加了一個這方面的新的特性，即media queries。

　　基本上，這意味著你可以基于不同的寬高的視圖區(qū)域改變樣式表。在更廣泛的領(lǐng)域中，這代表著規(guī)范中提到的：“通過使用Media Queries，其表現(xiàn)可以針對不同規(guī)格的輸出設(shè)備表現(xiàn)出不同的內(nèi)容。”

　　下面是有關(guān)min-width和max-width的兩個測試，當前只在Safari 3、Opera和Firefox 3.1 (Alpha)中可用。無論如何這是未來的Web開發(fā)，它使得我們可以很輕松的同時在移動或傳統(tǒng)設(shè)備中生成各自的頁面。

　　Multi-column layout

　　W3C提供了把文本按照報紙一樣按列排版的方式。Multi-column layout自成一個模塊。它允許Web開發(fā)者通過兩種方式把文字填到欄目中：定義每列的寬度或定義列數(shù)。第一種方式可以由column-width屬性完成，第二種方式則由column-count完成。為了在欄目之間創(chuàng)建空白，你需要定義另一個屬性column-gap的寬度。

　　Multi-column layout當前只有基于Mozilla的瀏覽器以及Safari 3支持，他們通過各自的前綴-moz-和-webkit-加以實現(xiàn)。下面的代碼用到了column-width：

　　-moz-column-width: 13em;

　　-moz-column-gap: 1em;

　　-webkit-column-width: 13em;

　　-webkit-column-gap: 1em;

　　還有一個例子是用到了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;

　　有一個已經(jīng)不再被支持的特性是column-space-destribution，曾經(jīng)用以描述如何劃分列間距。

　　通過@font-face定義Web字體

　　說@font-face是CSS3的新特性并不準確，CSS2就已經(jīng)第一次支持了這一特性，并且Internet Explorer早在第5個版本的時候就已經(jīng)支持它了。盡管如此，他們的實現(xiàn)方式是通過專有的eot(Embeded Open Type)字體格式，沒有別的瀏覽器決定使用這個格式。隨著Safari 3.1的發(fā)布，網(wǎng)站的發(fā)布者可以在網(wǎng)頁中使用任意持有證書的ttf(TrueType)字體文件或orf(OpenType)字體文件。

　　為了使用Web字體，每個字體表格必須使用@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添加了聽覺媒體類型的支持。這項支持用來定義在聽覺設(shè)備中合成語音的“樣式”。本規(guī)則添加了幾個這種新媒體類型的屬性。

　　目前的CSS2.1草案提出了media="speech"的特性，但是沒有明確定義可以應(yīng)用的屬性。所以聽覺媒體類型沒有被認可。

　　CSS3的Speech模塊移除了一些老的屬性，添加了新的屬性。這些都分配在speech媒體類型中。

　　Opera是實現(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; }