DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> CSS教程:CSS3新功能和新特性
CSS教程:CSS3新功能和新特性
編輯:CSS進階教程     

網頁制作poluoluo文章簡介:很多已經存在的新功能和特性正在被提出至CSS3。我們將在此嘗試展示其中的一些內容——前提是他們已經被Firefox、Konqueror、Safari/Webkit實現了。

很多已經存在的新功能和特性正在被提出至CSS3。我們將在此嘗試展示其中的一些內容——前提是他們已經被Firefox、Konqueror、Safari/Webkit實現了。

下面依次介紹。

譯者注:原文鏈接在此省去,其鏈接的內容會附帶在最後面。

邊框

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 屬性

生成的內容

content 屬性

其它模塊

media queries 模塊
multi-column layout 模塊
Web 字體模塊
Speech 模塊

 


 

下面附帶各個屬性/模塊的鏈接內容:


如何通過CSS3創建彩色的邊框
W3C已經在CSS3中為邊框提供了一些新的選項,這些選項即圓角邊框、邊框顏色之後,也是非常有趣的。Mozilla/Firefox已經實現了這個允許你創建很酷的彩色邊框的函數

 

Code: -moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;

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

 

Code: 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目前已經在Safari和Firefox 3.1 (Alpha)下工作了。語法如下:

 

Code: border-image: url(border.png) 27 27 27 27 round round; 或

 

Code: border-image: url(border.png) 27 27 27 27 stretch stretch;

 



Border-radius:用CSS創建圓角邊框!
W3C已經在CSS3中提供了一些新的選項,border-radius是其中之一,Mozilla/Firefox和Safari 3都已經實現了這個允許你創建圓角盒模型的函數。例如:

 

Code: -moz-border-radius: 5px;
-webkit-border-radius: 5px;

 

 這些不同的角可以被分別控制,代碼如下:

 

Code: -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,它已經在Safari 3+和Firefox 3.1 (Alpha)中得以實現。其規則提及了多重陰影,但是作者已經對此提出了質疑,並且Safari 3並沒有將其實現。
此屬性由3個長度參數和一個顏色參數組成,其中長度參數有:
1. 陰影的橫向位移量,正值意味著陰影靠右,負值則靠左;
2. 陰影的縱向位移量,負值意味著陰影靠上,正值則靠下;
3. 褪色漸變半徑,如果值為0則陰影會被直接切斷,值越高褪色漸變的效果就越明顯。例如:

 

Code: box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;

 

 此陰影會被僅靠圓角邊框的圓角而創建,例如:

 

Code: box-shadow: -10px -10px 0px #000;
border-radius: 5px;
padding: 5px 5px 5px 15px;

background-origin和background-clip
Mozilla、Safari 3和Konqueror都已經實驗性實現了CSS3中的background-origin屬性和background-clip屬性。Opera在上一個公開版本中有一個穩定的、基於早期Opera 2.3中背景和邊框規范的基礎實現。

background-origin屬性用來決定如何在盒模型中計算background-position的值。
此屬性有三種取值:border-box、padding-box和content-box。如果你使用了padding-box,則背景的位置計算會相對於內邊距區域的左上角;border-box則相對於邊框的左上角;content-box則相對於其內容的左上角。基於Gecko或Webkit的浏覽器使用了過時的規范版本,其取值為border、padding和content。

background-clip屬性用來決定背景是否要擴展到邊框裡。默認值是border-box,即擴展到邊框裡。但如果將其賦值padding-box則不會。如果你使用content-box則背景只會在有內容的矩形區域顯示(這個可選值已經在最近的規范中去掉了)。
實驗性實現的代碼如下:

 

Code: -webkit-background-origin / -moz-background-origin
-webkit-background-clip / -moz-background-clip

 

 穩定實現的代碼如下:

 

Code: background-origin
background-clip

 



Background-size

CSS3給了你一種定義背景圖片尺寸的方式。你可以通過背景圖片寬高的像素值或百分比進行定義。當你使用百分比進行定義時,其圖片尺寸是相對於其盒模型通過background-origin定義的區域的長和寬的。
實現這一特性的浏覽器有Opera 9.5、Safari 3、Firefox和Konqueror。他們分別使用-o-background-size、-webkit-background-size和-khtml-background-size、-moz-background-size屬性。例如:

 

Code: background-size: 200px 50px;

 



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

 

Code: background: url(body-top.gif) top left no-repeat, url(banner_fresco.jpg) top 11px no-repeat, url(body-bottom.gif) bottom left no-repeat, url(body-middle.gif) left repeat-y;

 

 目前已經實現這一屬性的浏覽器有:Webkit和KHTML (Konqueror)。


HSL顏色值
跟使用16進制的RGB(紅、綠、藍)顏色值一樣,CSS3也可以識別HSL(色相、飽和度、亮度)顏色值。
HSL顏色值有三個參數:
色相是指色盤的度數,0度或360度是紅色,120度是綠色,240度是藍色。我們可以在0度到360度之間取值以表示不同的色調。
飽和度值是一個百分數,100%表示完全飽和的顏色。
亮度值也是一個百分數,0%表示全黑,100%表示全白,50%則表示中間值。
這種顏色值為我們確定可用顏色和風格提供了一個非常廣闊的空間。
現如今,HSL已經被Opera 9.5、Safari 3、Konqueror和Mozilla浏覽器所實現。
例如:

 

Code: <div style="background-color: hsl(0,100%, 50%);"></div>
<div style="background-color: hsl(120,100%, 50%);"></div>
<div style="background-color: hsl(240,100%, 50%);"></div>

 

 相當於:

 

Code: <div style="background-color: rgb(255,0,0);"></div>
<div style="background-color: rgb(0,255,0);"></div>
<div style="background-color: rgb(0,0,255);"></div>

 

 鏈接:http://www.w3.org/TR/2003/CR-css3-color-20030514/#hsl-color


HSLA顏色值

HSLA與HSL的關系跟RGBA與RGB的關系一樣,即這裡允許出現第四個參數,以表示其透明度(通過Alpha通道)。
在截稿時,只有Safari 3和Firefox 3 Beta支持HSLA顏色值。
例如:

 

Code: <div style="background-color: hsla(0,100%,50%,0.2);"></div>
<div style="background-color: hsla(0,100%,50%,0.4);"></div>
<div style="background-color: hsla(0,100%,50%,0.6);"></div>
<div style="background-color: hsla(0,100%,50%,0.8);"></div>
<div style="background-color: hsla(0,100%,50%,1);"></div>

 

 其RGBA的寫法是:

 

Code: <div style="background-color: rgb(243,191,189);"></div>
<div style="background-color: rgb(246,143,142);"></div>
<div style="background-color: rgb(249,95,94);"></div>
<div style="background-color: rgb(252,47,47);"></div>
<div style="background-color: rgb(255,0,0);"></div>

 

 鏈接:http://www.w3.org/TR/2003/CR-css3-color-20030514/#hsla-color


Opacity
Opacity是目前為止最廣泛實現的CSS3特性。這大概也是我們最期待的特性。
例如:

 

Code: <div style="background: #ff0000; opacity: 0.2;"></div>
<div style="background: #ff0000; opacity: 0.4;"></div>
<div style="background: #ff0000; opacity: 0.6;"></div>
<div style="background: #ff0000; opacity: 0.8;"></div>
<div style="background: #ff0000; opacity: 1;"></div>

 



RGBA顏色值
CSS3已經添加了一個顏色賦值的新特性。即RGB之後你現在也可以使用RGBA。這個"A"指的就是你猜測的alpha(透明度)。這個新特性允許我們定義顏色的透明度。它讓網頁工程師的日子變得輕松許多。
如今,這個特性已經在Safari 3和Firefox 3 pre-alpha中得以實現。
例子:

 

Code: <div style="background: rgba(255, 0, 0, 0.2);"></div>
<div style="background: rgba(255, 0, 0, 0.4);"></div>
<div style="background: rgba(255, 0, 0, 0.6);"></div>
<div style="background: rgba(255, 0, 0, 0.8);"></div>
<div style="background: rgba(255, 0, 0, 1);"></div>

Text-shadow:用CSS實現類似Photoshop的特效
當我們需要實現一個簡單的陰影的時候,CSS3最終消除了我們對Photoshop的需求。text-shadow屬性可以被如下方式使用:

 

Code: text-shadow: 2px 2px 2px #000;

 

 各個參數和box-shadow的參數表意一致。
目前Webkit、Opera 9.5、Firefox 3.1 (pre-Alpha)、Konqueror、iCab已經實現這一特性。
注:這個特性並不是CSS3的新特性,而是CSS2提出的。Safari從第1個版本就有這個特性了。


Text-overflow
有的時候文本不得不被切割。比如當其溢出元素的矩形區域的時候。一旦這樣的現象出現,你就需要一個視覺上的暗示,告訴用戶文本被截斷了。這時我們引入了text-overflow-props。最普遍的方式就是通過省略號來表示文本溢出,如規則中所說,“當前的字符表現可能有所不同”。Opera通過-o-text-overflow支持了這一特性。
支持這些特性現在變得很棘手。Webkit只支持text-overflow的簡寫方式,且這些特性只是部分實現。text-overflow: ellipsis-word; 和 text-overflow: inherit; 並沒有工作。搞笑的是Internet Explorer從IE6開始支持了這一特性。具體參照:http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/textoverflow.asp

Code: text-overflow: ellipsis;
text-overflow: clip;
text-overflow: ellipsis-word;

 



Word-wrap
Word-wrap屬性已經被微軟發明並加入了CSS3中。它允許長單詞在必要的情況下被截斷換行。

 

Code: word-wrap: normal;
word-wrap: break-word

 

 這個特性已經在IE、Safari、Firefox 3.1 (Alpha)中得以實現。


Box-sizing:盒模型為簡單應用做了擴展
一直不完全理解盒模型?CSS3提供了一個叫做box-sizing的新的屬性,這個屬性讓我們改變浏覽器在計算元素寬度方面的特性。默認情況下,box-sizing的值是content-box。在這種情況下,計算寬高時會遵照CSS2.1的相關規則,再加入邊框和內邊距的寬高。如果把值設置為border-box,則你可以強制浏覽器不按照規范中的寬高進行渲染,而是把邊框和內邊距直接算在盒模型內。
Firefox已經實現了這一特性,屬性名為-moz-box-sizing。Safari使用-webkit-box-sizing屬性名,Opera直接使用box-sizing屬性名。


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

 

Code: div.resize { width: 100px; height: 100px; border: 1px solid; resize: both; overflow: auto; }

 

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


Outline
Outlines已經在CSS3中得到了擴展,它包含了outline-offset屬性。這個屬性允許設置渲染輪廓線時向外位移的量。比如:

 

Code: outline: 2px solid blue;
outline-offset: 12px;

 

 這一特性目前已經在Opera、Safari、Firefox下得以實現。


CSS3結點屬性(Attribute)選擇器
在W3C 2005年12月的草案中描述:

  引用:


6.3.2 屬性選擇器的部分值匹配
我們提供了三個屬性選擇器用以部分匹配其屬性值
[att^=val]代表att屬性值包含“val”前綴的元素
[att$=val]代表att屬性值包含“val”後綴的元素
[att*=val]代表att屬性值包含“val”的元素
屬性值必須是標示符或字符串。屬性名在選擇其中是否大小寫敏感取決於文檔語言。


Media Queries
CSS2增加了media="screen"的支持,通過這種方式我們定義了顯示數據用的樣式表。CSS3增加了一個這方面的新的特性,即media queries。
基本上,這意味著你可以基於不同的寬高的視圖區域改變樣式表。在更廣泛的領域中,這代表著規范中提到的:“通過使用Media Queries,其表現可以針對不同規格的輸出設備表現出不同的內容。”
下面是有關min-width和max-width的兩個測試,當前只在Safari 3、Opera和Firefox 3.1 (Alpha)中可用。無論如何這是未來的Web開發,它使得我們可以很輕松的同時在移動或傳統設備中生成各自的頁面。

 

Code: @media all and (min-width: 640px) { #media-queries-1 { background-color: #0f0; } } @media screen and (max-width: 2000px) { #media-queries-2 { background-color: #0f0; } }

 



Multi-column layout
W3C提供了把文本按照報紙一樣按列排版的方式。Multi-column layout自成一個模塊。它允許Web開發者通過兩種方式把文字填到欄目中:定義每列的寬度或定義列數。第一種方式可以由column-width屬性完成,第二種方式則由column-count完成。為了在欄目之間創建空白,你需要定義另一個屬性column-gap的寬度。
Multi-column layout當前只有基於Mozilla的浏覽器以及Safari 3支持,他們通過各自的前綴-moz-和-webkit-加以實現。下面的代碼用到了column-width:

 

Code: -moz-column-width: 13em;
-moz-column-gap: 1em;

-webkit-column-width: 13em;
-webkit-column-gap: 1em;

 

 還有一個例子是用到了column-count:

 

Code: -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;

 

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


通過@font-face定義Web字體
說@font-face是CSS3的新特性並不准確,CSS2就已經第一次支持了這一特性,並且Internet Explorer早在第5個版本的時候就已經支持它了。盡管如此,他們的實現方式是通過專有的eot(Embeded Open Type)字體格式,沒有別的浏覽器決定使用這個格式。隨著Safari 3.1的發布,網站的發布者可以在網頁中使用任意持有證書的ttf(TrueType)字體文件或orf(OpenType)字體文件。
為了使用Web字體,每個字體表格必須使用@font-face規則。

 

Code: @font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); }
@font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf'); }

 

 然後調用該字體:

 

Code: h3 { font-family: Delicious, sans-serif; }

 



CSS3 Speech
CSS2添加了聽覺媒體類型的支持。這項支持用來定義在聽覺設備中合成語音的“樣式”。本規則添加了幾個這種新媒體類型的屬性。
目前的CSS2.1草案提出了media="speech"的特性,但是沒有明確定義可以應用的屬性。所以聽覺媒體類型沒有被認可。
CSS3的Speech模塊移除了一些老的屬性,添加了新的屬性。這些都分配在speech媒體類型中。
Opera是實現最多CSS3 Speech屬性的最流行的浏覽器。

 

Code: #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 Speech模塊還在草案階段,Opera對其通過-xv-前綴加以實現。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved