用CSS3將你的設(shè)計(jì)帶入下個(gè)高度
發(fā)布時(shí)間:2009-08-08 00:33:30 作者:佚名
我要評論

盡管CSS3的諸多新特性還不被很多瀏覽器支持,或者說支持的不好。但作為一個(gè)前端開發(fā)人員,你總不能等到所有瀏覽器都完美支持它的時(shí)候再去學(xué)習(xí)。
盡管CSS3的諸多新特性還不被很多瀏覽器支持,或者說支持的不好。但作為一個(gè)前端開發(fā)人員,你總不能等到所有瀏覽器都完美支持它的時(shí)候再去學(xué)習(xí)。
CSS3到底給我們帶來了哪些新特性呢?簡單的說,CSS3把很多以前需要使用圖片和腳本來實(shí)現(xiàn)的效果,只需要短短幾行代碼就能搞定。比如圓角,圖片邊框,文字陰影和盒陰影等。CSS3不僅能簡化前端開發(fā)工作人員的設(shè)計(jì)過程,還能加快頁面載入速度。
本文里面,就讓我們來全面的看一下CSS3的各種新特性。也別忘了檢閱我們之前發(fā)布的一些CSS教程和技巧文章: 60+CSS技巧教程資源大全 CSS3.0相關(guān)資源和參考手冊收集整理 使用瀏覽器專有屬性
為了使用大部分CSS3特性,我們不得不與原來的屬性一起使用生產(chǎn)商專有擴(kuò)展。原因是直到現(xiàn)在,大部分瀏覽器只支持部分CSS3屬性。而且不幸的是,一些屬性甚至到最后都可能不被W3C推薦,所以通過指定瀏覽器專有屬性,將他們與標(biāo)準(zhǔn)屬性區(qū)分開來是很重要的(然后在他們是多余的的時(shí)候使用符合標(biāo)準(zhǔn)的樣式將之覆蓋)。
當(dāng)然,這種方法的劣勢是,將導(dǎo)致一個(gè)雜亂的樣式表和網(wǎng)站在瀏覽器之間的表現(xiàn)不一致。畢竟,我們不想在我們的樣式表中重拾私有瀏覽器hack的需求。 Internet Explorer的臭名昭著的marquee、blink以及其它標(biāo)簽在大量樣式表中被應(yīng)用,并在20世紀(jì)九十年代成為一個(gè)傳奇;它們依然讓現(xiàn)存的很多網(wǎng) 站(在其他瀏覽器中)表現(xiàn)不一致甚至難以閱讀。而我們現(xiàn)在也不想將我們自己置于同樣的境地,對吧?
然而,網(wǎng)站不需要在所有的瀏覽器中看起來必須嚴(yán)格的一致。有的時(shí)候在某個(gè)瀏覽器中使用私有屬性來實(shí)現(xiàn)特定的效果是可行的。
最常見的私有屬性是用于Webkit核心瀏覽器的(比如, Safari), 它們以-webkit-開始,以及Gecko核心的瀏覽器(比如, Firefox),以-moz-開始,還有Konqueror (-khtml-)、Opera (-o-) 以及Internet Explorer (-ms-)都有它們自己的屬性擴(kuò)展(目前只有IE8支持-ms-前綴)
作為專業(yè)的設(shè)計(jì)師,我們不得不注意:使用這些私有屬性將讓我們的樣式表不能通過驗(yàn)證。所以目前將他們放到最終版的樣式中是少見的。但是在某種情況下,比如試驗(yàn)或?qū)W習(xí),我們至少可以考慮將他們和標(biāo)準(zhǔn)的CSS屬性一起寫到一個(gè)樣式表中。擴(kuò)展閱讀 Vendor-specific extensions and W3C Vendor-specific extensions to CSS3 Vendor-specific properties 1. 選擇器
CSS選擇器是個(gè)難以置信地強(qiáng)大的工具:它們允許我們在標(biāo)簽中指定特定的HTML元素而不必使用多余的 class、 ID 或JavaScripts。而且它們中的大部分并不是CSS3中新添加的,而是沒有被得到應(yīng)有的廣泛應(yīng)用。如果你在嘗試實(shí)現(xiàn)一個(gè)干凈的、輕量級的標(biāo)簽以及 結(jié)構(gòu)與表現(xiàn)更好的分離,高級選擇器是非常有用的。它們可以減少在標(biāo)簽中的class和ID的數(shù)量并讓設(shè)計(jì)師更方便的維護(hù)樣式表。屬性選擇器
三個(gè)新的屬性選擇器被添加到CSS3: [att^="value"]
匹配包含以特定的值開頭的屬性的元素 [att$="value"]
匹配包含以特定的值結(jié)尾的屬性的元素 [att*="value"]
匹配包含含有特定的值的屬性的元素
值的屬性的元素
a[title$="tweetCC"] {
position: absolute;
top: 0;
right: 0;
display: block;
width: 140px;
height: 140px;
text-indent: -9999px;
}
瀏覽器支持:只有IE6不支持CSS的屬性選擇器。IE7和IE8、Opera、Webkit核心和Gecko核心的瀏覽器都支持。所以在你的樣式中使用屬性選擇器是比較安全的。 連字符
CSS3中唯一新引入的連字符是通用的兄弟選擇器(同級)。它針對一個(gè)元素的有同一個(gè)父級節(jié)點(diǎn)的所有兄弟級別元素。
比如,給某個(gè)特定的div的同級的圖片添加一個(gè)灰色的邊框(div和圖片應(yīng)該有同一個(gè)父級節(jié)點(diǎn)),在樣式表中定義下面的樣式就足夠了:
div~img {
border: 1px solid #ccc;
}
瀏覽器支持:所有的主要瀏覽器都支持這個(gè)通用的兄弟選擇器除了我們最愛的IE6!偽類
或許在CSS3中增加最多的就是新的偽類了,這里是一些最有趣和最有用的: :nth-child(n)
讓你基于元素在父節(jié)點(diǎn)的子元素的列表位置來指定元素。你可以是用數(shù)字、數(shù)字表達(dá)式或odd 和even 關(guān)鍵詞(對斑馬樣式的列表很完美)。所以如果你想匹配在第四個(gè)元素之后的一個(gè)3個(gè)元素的分組,你可以簡單的這樣使用: :nth-child(3n+4) { background-color: #ccc; }/*匹配第4,7,10,13,16,19...個(gè)元素*/ :nth-last-child(n)
與上個(gè)選擇器的思想同樣,但是從后面匹配元素(倒序),比如,為了指定一個(gè)div里面的最后兩個(gè)段落,我們可以使用下面的選擇器: div p:nth-last-child(-n+2) :last-child
匹配一個(gè)父節(jié)點(diǎn)下的最后一個(gè)子元素,等同于:nth-last-child(1) :checked
匹配選擇的元素,比如復(fù)選框 :empty
匹配空元素(沒有子元素)。 :not(s)
匹配所有不符合指定聲明(s)的元素。比如,如果你想讓所有的沒有使用”lead”類的段落的顯示為黑色,可以這樣寫:
p:not([class*="lead"]) { color: black; }
Andrea Gandino 在他的網(wǎng)站上使用:last-child 為選擇器指定每篇日志的最后一個(gè)段落,并將其的外間距(margin)設(shè)置為0:
#primary .text p:last-child { margin: 0; }
瀏覽器支持: Webkit核心和Opera 瀏覽器支持所有新的CSS3 偽類,F(xiàn)irefox 2 和3 (Gecko核心) 只支持:not(s), :last-child, only-child, :root, :empty, :target, :checked, :enabled 和:disabled,但是Firefox 3.5 將更加廣泛的支持CSS3 選擇器。Trident核心瀏覽器(Internet Explorer)事實(shí)上不支持這些偽選擇器。偽元素
在CSS3中唯一引入的偽元素是::selection.它可以讓你指定被用戶高亮(選中)的元素。
瀏覽器支持: 目前沒有任何一款I(lǐng)nternet Explorer 或Firefox 瀏覽器支持::selection 偽元素。Safari, Opera 和Chrome 均支持。擴(kuò)展閱讀 Selectors Level 3: W3C Working Draft CSS3: Attribute selectors: CSS3.info Compatibility table: CSS3 Selectors CSS selectors and pseudo selectors browser compatibility CSS3 Attribute Selectors ::selection General Sibling Selector CSS3 Pseudo-classes
#p#
2. RGBA和透明度
RGBA 讓你可以不僅僅設(shè)定色彩,還能設(shè)定元素的透明度。一些瀏覽器尚不支持它,所以最好在RGBa前面設(shè)定其它瀏覽器支持的沒有透明的顏色屬性。
Tim Van Damme在鏈接的hover效果上使用了RGBA
在這個(gè)網(wǎng)站上,Tim Van Damme在鼠標(biāo)懸停效果上使用了RGBa;例如,在他的首頁的network鏈接上:
#networks li a:hover,
#networks li a:focus {
background: rgba(164, 173, 183, .15);
}
當(dāng)設(shè)定一個(gè)RGBA 色彩的時(shí)候,我們必須依次設(shè)定紅、藍(lán)、和綠色的值,可以是0-255或百分?jǐn)?shù)。透明值應(yīng)該在0.0到1.0之間,例如0.5 代表50% 的透明度。
RGBA 和opacity 之間的不同是前者只會應(yīng)用到指定的元素上,而后者會影響我們指定的元素及其子元素。
這里有個(gè)例子展示我們?nèi)绾谓o一個(gè)div添加80% 透明:
div { opacity: 0.8; }
瀏覽器支持: RGBA 被Webkit內(nèi)核瀏覽器支持。IE所有版本都不支持。Firefox 2也不支持,但是Firefox 3 和Opera 9.5均支持。Opacity 被Opera、Webkit核心 和Gecko核心的瀏覽器支持。IE所有版本同樣不支持。IE只支持自家的該死的濾鏡(filter)擴(kuò)展閱讀: CSS Color Module Level 3: W3C Working Draft RGBA colors: CSS3.info RGBA color space Is CSS3 RGBa ready to rock? Super-Awesome Buttons with CSS3 and RGBA
#p#
3. 多欄布局
這是新的CSS3 選擇器可以讓你不用使用多個(gè)div標(biāo)簽就能實(shí)現(xiàn)多欄布局。瀏覽器解釋這個(gè)屬性并生成多欄,讓文本實(shí)現(xiàn)一個(gè)仿報(bào)紙的多欄結(jié)構(gòu)。
tweetCC 在其首頁使用了CSS3 多欄選擇器
tweetCC 在其首頁上將介紹文字顯示為四欄。這四欄并非浮動(dòng)的div;相反,設(shè)計(jì)師使用下面的CSS3 多欄布局:
.index #content div {
-webkit-column-count : 4;
-webkit-column-gap : 20px;
-moz-column-count : 4;
-moz-column-gap : 20px;
}
我們可以通過這個(gè)選擇器定義三件事情:欄數(shù)(column-coun)、欄寬(column-width、例子中沒有用到)和各欄之間的空白/間距(column-gap)。 如果column-count未設(shè)定,瀏覽器會在允許的寬度內(nèi)容納盡可能多的欄目。
為了在各欄時(shí)間添加一個(gè)數(shù)值的分隔,我們可以使用column-rule 屬性,其功能和border 屬性類似:
div {
column-rule: 1px solid #00000;
}
上面的這條屬性,瀏覽器中不會看到任何效果,因?yàn)樗鼪]有分欄,如果配合上面的例子就可以了。
相關(guān)屬性: column-break-after, column-break-before, column-span, column-fill.
瀏覽器支持: 多欄布局目前被Safari 3+,chrome,和Firefox 1.5+所支持。擴(kuò)展閱讀: CSS3 module: Multi-column layout: W3C Working Draft Columns CSS3 – Multi-Column Layout Demonstration CSS3 Columns Designing tweetCC Introduction to CSS3 – Part 5: Multiple Columns
#p#
4. 多背景圖
CSS3 允許你使用多個(gè)屬性比如background-image、background-repeat, background-size, background-position, background-originand background-clip等在一個(gè)元素上添加多層背景圖片.
在一個(gè)元素上添加多背景的最簡單的方法是使用簡寫代碼,你可以指定上面的所有屬性到一條聲明中,只是最常用的還是image, position 和repeat:
div {
background: url(example.jpg) top left no-repeat,
url(example2.jpg) bottom left no-repeat,
url(example3.jpg) center center repeat-y;
}
第一個(gè)圖片將是離用戶“最近”的那個(gè)。
該屬性的一個(gè)更復(fù)雜的版本可以是這樣的:
div {
background: url(example.jpg) top left (100% 2em) no-repeat,
url(example2.jpg) bottom left (100% 2em) no-repeat,
url(example3.jpg) center center (10em 10em) repeat-y;
}
在這里,(100% 2em) 是background-size 的值;第一個(gè)背景圖片將會出現(xiàn)在左上角并會被拉伸至該div的100%寬度和2em的高度。
因?yàn)橹挥猩贁?shù)的瀏覽器支持它,又因?yàn)樵诰W(wǎng)站上不顯示背景有損網(wǎng)站的視覺效果,所以,這并不是一個(gè)被廣泛應(yīng)用了的屬性。盡管如此,它顯然能夠大大地提高設(shè)計(jì)師的工作流并顯著減少標(biāo)簽數(shù)量——相對于用其它方式實(shí)現(xiàn)同樣的效果。
瀏覽器支持: 目前,多背景圖片只在Safari/chrome 和Konqueror中有效擴(kuò)展閱讀: Layering multiple background images Multiple backgrounds with CSS3 and CSS3.info Introduction to CSS3, Part 6: Backgrounds
#p#
5. Word Wrap
word-wrap 屬性用來防止太長的字符串溢出的??梢杂脙蓚€(gè)屬性值normal 和break-word。normal 值(默認(rèn)的) 只在允許的斷點(diǎn)截?cái)辔淖?,如連字符。如果使用了break-word ,文字可以在任何需要的地方截?cái)嘁云ヅ浞峙涞目臻g并防止溢出。
WordPress 后臺在數(shù)據(jù)表中使用了word-wrap.
在WordPress 的控制面板中,word-wrap 屬性被用于表格中的元素;比如在日志和頁面的列表中:
.widefat * {
word-wrap: break-word;
}
瀏覽器支持: word-wrap 被Internet Explorer 和Safari/chrome支持。Firefox 將在3.5版本中支持它。 擴(kuò)展閱讀: Force Wrapping: the ‘word-wrap’ property — CSS Text Level 3: W3C Working Draft word-wrap: CSS3.info CSS word-wrap word-wrap: Mozilla Developer Center
#p#
6. 文字陰影
盡管在CSS2中就已經(jīng)存在,text-shadow是一個(gè)未被廣泛應(yīng)用的CSS屬性。但是它將在CSS3中被廣泛采用。這個(gè)屬性給設(shè)計(jì)師一個(gè)新的跨瀏覽器的工具來為設(shè)計(jì)添加一個(gè)維度以使文字醒目。
盡管這樣,你需要確認(rèn),你的設(shè)計(jì)中的文字是可讀的,以防用戶的瀏覽器不支持CSS3高級屬性。給文字和背景色彩足夠的對比度以防text-shadow 屬性不能被瀏覽器正確渲染或理解。
Beakapp 在它的網(wǎng)站中使用了text-shadow 屬性:內(nèi)容區(qū)域.
BeakApp.com 為內(nèi)容區(qū)域使用了text-shadow 屬性,為文字添加深度和維度 并讓它變得醒目——而不是使用某種圖片替換技術(shù)。該屬性目前只在Safari和Chrome中可用。
該網(wǎng)站的主菜單使用的CSS如下:
.signup_area p {
text-shadow: rgba(0,0,0,.8) 0 1px 0;
}
這里我們使用陰影顏色(使用了RGBA,前面有描述), 然后是右(x 坐標(biāo)) 和底部(y 坐標(biāo)) 偏移,最后是模糊半徑
如果要在一個(gè)文字上使用多陰影,可以使用逗號分開。比如:
p {
text-shadow: red 4px 4px 2px,
yellow -4px -4px 2px,
green -4px 4px 2px;
}
瀏覽器支持: Webkit核心瀏覽器和Opera 9.5 支持text-shadow。Internet Explorer 不支持它,F(xiàn)irefox 將在即將發(fā)行的3.5版本中支持。 擴(kuò)展閱讀: Text Shadows: the ‘text-shadow’ property — W3C Working Draft Text shadows: Web Style Sheets CSS tips and tricks Text-shadow, Photoshop like effects using CSS — CSS3.info Make Cool And Clever Text Effects With CSS Text-Shadow Safari’s Text-Shadow Anti-Aliasing CSS Hack text-shadow text-shadow: Mozilla Developer Center
#p#
7. @font-face屬性
盡管是最被期待的CSS3 特性 (甚至它在CSS2中就已經(jīng)被引入了), @font-face在網(wǎng)站上仍然沒有像其它CSS3屬性那樣被廣泛采用.這主要因?yàn)樽煮w授權(quán)和版權(quán)問題:嵌入的字體很容易從網(wǎng)站上下載到,這是字體廠商的主要顧慮。
盡管如此,授權(quán)我呢提貌似已經(jīng)開始解決了。TypeKit 承諾將制定一個(gè)方案,以使設(shè)計(jì)師和字體廠商更容易的統(tǒng)一授權(quán)問題,這將顯著的充實(shí)網(wǎng)站設(shè)計(jì)中的排版并使@font-face 屬性在實(shí)際工作中可用。
Mozilla實(shí)驗(yàn)室JetPack 網(wǎng)站采用font-face規(guī)則來使用DroidSans 字體。
少數(shù)使用該屬性的網(wǎng)站之一是新上線的JetPack MozillaLabs.
@font-face{
font-family: 'DroidSans';
src: url('../fonts/DroidSans.ttf') format('truetype');
}
要想在你的網(wǎng)站中使用嵌入字體,你必須獨(dú)立的生命每個(gè)樣式(比如, normal, bold 和italic)。請確保只使用被授權(quán)為使用到網(wǎng)站的字體并在需要的時(shí)候給字體的設(shè)計(jì)師一些表揚(yáng)。
在定義了@font-face 規(guī)則之后,你就可以用普通的font-family 屬性來引用該字體了:
p {
font-family: "DroidSans";
}
如果一個(gè)瀏覽器不支持@font-face,它將使用font-family(CSS 字體庫)屬性中指定的下一個(gè)字體。對支持的瀏覽器來說,如果@font-face 字體是一個(gè)奢侈品(只有少數(shù)元素用到),這對一些網(wǎng)站是可行的;但是如果該字體在設(shè)計(jì)中占有一個(gè)主要的角色或者是公司的視覺特征的一部分,你就可能想使用 其它的解決方案,比如sIFR 或Cufón。盡管如此,請記住,這些工具對標(biāo)題或較短的文字更適合,復(fù)制和粘貼此類內(nèi)容比較困難而且對用戶并不友好。
在網(wǎng)站中使用此類字體不是很好嗎?Dave Shea 使用Cufón 和Museo Sans來做的實(shí)驗(yàn)。很漂亮!
瀏覽器支持: @font-face 被Safari 3.1+和chrome支持。Internet Explorer 支持 字體。 Opera 10 和Firefox 3.5 將會支持它。 字體。 Opera 10 和Firefox 3.5 將會支持它。 擴(kuò)展閱讀: Font Descriptions and @font-face — W3C Working Draft Web fonts with @font-face @font-face — Sitepoint Fonts available for @font-face embedding @font-face beautiful fonts with @font-face Introducing Typekit
#p#
8. 圓角(邊框半徑)
Border-radius 無需背景圖片就能給HTML元素添加圓角?,F(xiàn)在,它可能是使用最多的CSS3屬性了,很簡單的原因是使用圓角比較好而且不會對設(shè)計(jì)和可用性有沖突。
不同于添加Javascript或多于的HTML標(biāo)簽,僅僅需要添加一些CSS屬性并從好的方面考慮。這個(gè)方案是清晰的和比較有效的,而且可以讓你免于花費(fèi)幾個(gè)小時(shí)來尋找精巧的瀏覽器方案和基于Javascript圓角。
Sam Brown的博客在標(biāo)題、分類和鏈接處使用了border-radius.
Sam Brown在他的博客的標(biāo)題、分類、鏈接和div中大量的使用了border-radius屬性。使用圖片來實(shí)現(xiàn)該效果將會比較費(fèi)時(shí)的,這是在項(xiàng)目中使用CSS3屬性是提高開發(fā)效率的重要步驟的原因之一
為了給類別鏈接添加圓角,Sam 使用了下面的CSS片段:
h2 span {
color: #1a1a1a;
padding: .5em;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}
我們可以做的更進(jìn)一步,添加原始的CSS3 屬性和Konqueror 屬性擴(kuò)展,如下:
h2 span {
color: #1a1a1a;
padding: .5em;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-khtml-border-radius: 6px;
border-radius: 6px;
}
如果我們想在我們的元素中的某個(gè)特定的角上應(yīng)用此屬性,我們可以單獨(dú)的指定每個(gè)角:
div {
-moz-border-radius-topright: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;
-webkit-border-top-right-radius: 6px;
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
}
瀏覽器支持: border-radius只有所有版本的IE瀏覽器和Opera不支持,Webkit和Gecko核心的瀏覽器都支持。 擴(kuò)展閱讀: border-radius: W3C Working Draft Border-radius: create rounded corners with CSS! — CSS3.info Introduction to CSS3, Part 2: Borders An Ode to border-radius CSS3 Border-Radius and Rounded Corners
#p#
9. 邊框圖片
border-image 屬性允許你在元素的邊框上設(shè)定圖片, 讓你從通常的solid, dotted 和其它邊框樣式中解放出來。該屬性給設(shè)計(jì)師一個(gè)更好的工具,用它可以方便的定義設(shè)計(jì)元素的邊框樣式,比background-image 屬性(對高級設(shè)計(jì)來說) 或枯燥的默認(rèn)邊框樣式更好用。我們也可以明確的定義一個(gè)邊框可以被如何縮放或平鋪。
SpoonGraphics 博客為它的圖片邊框使用了border-image 屬性。
在SpoonGraphis blog中,border-image被用于圖片邊框,如下所示:
#content .post img {
border: 6px solid #f2e6d1;
-webkit-border-image: url(main-border.png) 6 repeat;
-moz-border-image: url(main-border.png) 6 repeat;
border-image: url(main-border.png) 6 repeat;
}
要想定義border-image,我們必須指定圖片地址,圖片的那部分將被剪切并用于元素的每一個(gè)邊上,以及圖片是否被縮放或平鋪。
為了制作一個(gè)使用下面的圖片作為邊框的div ,我們應(yīng)該使用下面的代碼(我們將為這個(gè)例子添加Opera 和Konqueror 支持):
div {
border-width: 18px 25px 25px 18px;
-webkit-border-image: url(example.png) 18 25 25 18 stretch stretch;
-moz-border-image: url(example.png) 18 25 25 18 stretch stretch;
-o-border-image: url(example.png) 18 25 25 18 stretch stretch;
-khtml-border-image: url(example.png) 18 25 25 18 stretch stretch;
border-image: url(example.png) 18 25 25 18 stretch stretch;
}
該屬性的最后一個(gè)值可以是stretch (默認(rèn)), round (只有一個(gè)平鋪了整數(shù)倍的圖片被填充在允許的地方) 或repeat。在我們的例子中,上下左右邊框圖片被拉伸。如果我們只想頂部和底部邊框被拉伸,我們可以使用下面的CSS:
div {
(...)
border-image: url(example.png) 18 25 25 18 stretch repeat;
}
我們可以可以單獨(dú)的指定每一個(gè)角,如果我們想為每一個(gè)角使用不同的圖片:
div {
border-top-image: url(example.png) 5 5 stretch;
border-right-image: url(example.png) 5 5 stretch;
border-bottom-image: url(example.png) 5 5 stretch;
border-left-image: url(example.png) 5 5 stretch;
border-top-left-image: url(example.png) 5 5 stretch;
border-top-right-image: url(example.png) 5 5 stretch;
border-bottom-left-image: url(example.png) 5 5 stretch;
border-bottom-right-image: url(example.png) 5 5 stretch;
}
如果瀏覽器不支持border-image 屬性,它將無視這些屬性,并只應(yīng)用定義的其它邊框?qū)傩?,比如border-width 和border-color.
瀏覽器支持: border-image 目前只有Webkit核心瀏覽器支持。不太確定Firefox的下一個(gè)版本是否支持。 擴(kuò)展閱讀: The ‘border-image’ property: W3C Working Draft Border-image: using images for your border — CSS3.info border-image in Firefox border-image demonstration page Replicating iPhone Buttons the “webkit” way!
#p#
10. 盒陰影
box-shadow 屬性可以對HTML元素添加陰影 而不用額外的標(biāo)簽或背景圖片。類似text-shadow 屬性,它增強(qiáng)設(shè)計(jì)的細(xì)節(jié);而且因?yàn)樗挥绊憙?nèi)容的可讀性,隨意他可以是增加那種額外感覺/效果的一種很好的方法。

10to1 為它的導(dǎo)航背景和hover狀態(tài)使用了box-shadow 屬性.
10to1 為其導(dǎo)航區(qū)域增加的一個(gè)簡單的陰影并將該屬性應(yīng)用于導(dǎo)航鏈接的hover效果:
#navigation {
-webkit-box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
}
#navigation li a:hover,
#navigation li a:focus {
-webkit-box-shadow: 0 0 5px #111;
-moz-box-shadow: 0 0 5px #111;
}
box-shadow屬性可以用多個(gè)值:水平偏移、垂直偏移、模糊半徑、伸展半徑和陰影顏色。水平和垂直偏移和陰影色使用的最多。
在一個(gè)div上應(yīng)用紅色陰影,右邊和下邊偏移4px,無模糊,我們可以使用下面的代碼:
div {
-moz-box-shadow: 4px 4px 0 #f00;
-webkit-box-shadow: 4px 4px 0 #f00;
box-shadow: 4px 4px 0 #f00;
}
瀏覽器支持: box-shadow目前只有Webkit核心瀏覽器支持,但是即將發(fā)布的Firefox 3.5 也將提供很好的支持。 擴(kuò)展閱讀: The ‘box-shadow’ property — W3C Working Draft Box-shadow, one of CSS3’s best new features — CSS3.info Apple’s Navigation bar using only CSS Box Shadow — Surfin’ Safari blog
#p#
11. 盒子大小
根據(jù)CSS 2.1 規(guī)范,在計(jì)算盒子的總大小的時(shí)候,元素的邊框和padding應(yīng)該被加入到寬度和高度之中的。但是眾所周知,舊的瀏覽器卻以它們自己的非常有“創(chuàng)意”的方式來解釋這個(gè)規(guī)范。box-sizing屬性允許你指定瀏覽器如何計(jì)算一個(gè)元素的寬度和高度。
WordPress 在控制面板的所有的輸入框元素中使用border-box 屬性。
WordPress 后臺區(qū)域在它的所有text類型的input標(biāo)簽和textarea標(biāo)簽上使用了該屬性:
input[type="text"],
textarea {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
第三個(gè)屬性(-ms-box-sizing) 只有在Internet Explorer 8下有效。通過其他選擇器,WordPress 的樣式表同樣添加了Konqueror 屬性: -khtml-box-sizing。
box-sizing 屬性可以兩個(gè)值中的一個(gè):border-box 和content-box。 Content-box如CSS2.1中的定義的那樣渲染寬度。Border-box 從設(shè)定的寬度和高度中扣除padding和邊框(如老式瀏覽器那樣。)。
瀏覽器支持:box-sizing 被IE8、Opera、Gecko核心和Webkit核心瀏覽器支持。 擴(kuò)展閱讀: ‘box-sizing’ property: W3C Candidate Recommendation Box-sizing, box-model fixes for the simple people: CSS3.info CSS3 box-sizing attribute
#p#
12. 媒體查詢
媒體查詢(media queries)可以讓你為不同的設(shè)備基于它們的能力定義不同的樣式。比如,在可視區(qū)域小于480像素的時(shí)候,你可能想讓網(wǎng)站的側(cè)欄顯示在主內(nèi)容的下邊,這樣它就不應(yīng)該浮動(dòng)并顯示在右側(cè)了:
#sidebar {
float: right;
display: inline; /* IE Double-Margin Bugfix */
}
@media all and (max-width:480px) {
#sidebar {
float: none;
clear: both;
}
}
你也可以指定使用慮色屏的設(shè)備:
a {
color: grey;
}
@media screen and (color) {
a {
color: red;
}
}
潛力是無限的。這個(gè)屬性是很有用的因?yàn)槟隳悴辉谛枰仨殲椴煌脑O(shè)備寫?yīng)毩⒌臉邮奖砹耍夷阋矡o需使用JS來確定每個(gè)用戶的瀏覽器的屬性和功能。一個(gè)實(shí)現(xiàn)一個(gè)靈活的布局的更加流行的基于Javascript的方案是使用智能的流體布局,讓布局對于用戶的瀏覽器分辨率更加靈活。
瀏覽器支持: 媒體查詢被基于webkit核心的瀏覽器和Opera支持。Firefox將在3.5版本中支持它。IE目前不支持這些屬性而且在將來的版本中,也沒有支持的計(jì)劃。 擴(kuò)展閱讀: 媒體查詢: W3C 候選推薦 擴(kuò)展到CSS 3 媒體查詢 媒體查詢: CSS3.info The bleeding edge of web: media queries 安全的媒體查詢 媒體類型
#p#
13. 語音
CSS3的語音模塊CSS3可以讓你為屏幕閱讀者指定語音樣式。你可以控制語音的不同設(shè)置,比如: voice-volume
使用從0到100的數(shù)字(0 即靜音)、百分?jǐn)?shù)或關(guān)鍵詞(silent,x-soft,soft,medium,loud 和x-loud等)來設(shè)置音量。 voice-balance
控制來自哪個(gè)聲道(如果用戶的音箱系統(tǒng)支持立體聲)。 Speak
指示屏幕閱讀器閱讀相關(guān)的文字、數(shù)字或標(biāo)點(diǎn)符號??捎玫年P(guān)鍵詞為none, normal, spell-out, digits, literal-punctuation, no-punctuation 和inherit. Pauses and rests
在一個(gè)元素的被讀完之前或之后設(shè)定暫?;蛲V?。你可以使用時(shí)間單位(比如, “2s” 表示2 秒鐘) 或關(guān)鍵詞(none,x-weak, weak, medium, strong 和x-strong)。 Cues
使用聲音限制特定元素并控制器音量。 voice-family
設(shè)定特定的聲音類型和聲音合成(就像font-family)。 voice-rate
控制閱讀的速度。可以設(shè)置為百分?jǐn)?shù)或關(guān)鍵詞: x-slow, slow,medium, fast 和x-fast. voice-stress
指示應(yīng)該使用的任何重音(強(qiáng)語氣),使用不同的關(guān)鍵詞: none, moderate,strong 和 reduced.
比如,告訴屏幕閱讀器使用男聲讀取所有的h2 標(biāo)簽,用左邊的喇叭,用軟調(diào)按照指定的聲音,可以像下面這樣指定樣式:
h2 {
voice-family: female;
voice-balance: left;
voice-volume: soft;
cue-after: url(sound.au);
}
不幸的是,這個(gè)屬性現(xiàn)在只有非常少的支持,但是顯然值得關(guān)注因?yàn)槲覀兛梢栽趯硖岣呶覀兙W(wǎng)站的易用性。
瀏覽器支持: 現(xiàn)在,只有Opera 瀏覽器(Windows XP and 2000)支持語音模塊的部分屬性。為了使用它們,需要使用-xv- 前綴,比如-xv-voice-balance: right。 擴(kuò)展閱讀: CSS3 語音模塊——W3C 工作草案 CSS3 語音 — CSS3.info 聽覺CSS: 支持CSS 2 聽覺樣式表 / CSS 3 語音模塊 結(jié)尾
CSS3 屬性可以極大的提高你的工作流,讓一些最耗時(shí)的CSS任務(wù)不費(fèi)吹灰之力就能搞定,并且可以使用更好、更簡潔和更輕的代碼標(biāo)簽。一些屬性尚未被廣泛的支持,甚至是最新的瀏覽器,但這并不意味著我們不能用它們進(jìn)行試驗(yàn)或者為使用先進(jìn)瀏覽器的用戶更高級的功能和CSS樣式。
在這點(diǎn)兒上,請記住,培養(yǎng)我們的用戶 也同樣是有用和必須的:網(wǎng)站無需看起來在每個(gè)瀏覽器里都要保持一致,而且如果一個(gè)差異不(負(fù)面)影響美學(xué)和網(wǎng)站的可用性,它就應(yīng)該是被考慮的。如果我們繼續(xù)浪費(fèi)大量的時(shí)間和金錢以使每個(gè)細(xì)節(jié)絕對一致(而不是采用更靈活的和未來導(dǎo)向的方案), 用戶將沒有升級他們的瀏覽器的任何需要/動(dòng)機(jī),這樣我們就不得不在舊的瀏覽器變?yōu)楣哦墳g覽器以及強(qiáng)大的現(xiàn)代瀏覽器變?yōu)闃?biāo)準(zhǔn)之前等待很長的時(shí)間
我們試驗(yàn)和使用新的CSS3屬性越早,它們就被流行的瀏覽器支持的更早,我們也就能夠更早的廣泛使用它們。推薦閱讀及資源: CSS3 Previews: CSS3.info CSS 3: Exciting Function and Features: 30 Useful Tutorials 5 CSS3 Techniques For Major Browsers using the Power of jQuery Introduction to CSS3 – Part 1: What is it? Comparison of layout engines (Cascading Style Sheets) and Wikipedia Progressive enhancement Five CSS design browser differences I can live with Progressive Enhancement with CSS CSS support in Opera 9.5 關(guān)于原作者
Inayaili de León是一個(gè)葡萄牙的網(wǎng)頁設(shè)計(jì)師。她對網(wǎng)頁設(shè)計(jì)和前端編碼真的非常感興趣,而且喜歡漂亮和簡潔的網(wǎng)站。她居住在倫敦。你可以在Web Designer Notebook上看到她的更多文章,并follow her on Twitter.
CSS3到底給我們帶來了哪些新特性呢?簡單的說,CSS3把很多以前需要使用圖片和腳本來實(shí)現(xiàn)的效果,只需要短短幾行代碼就能搞定。比如圓角,圖片邊框,文字陰影和盒陰影等。CSS3不僅能簡化前端開發(fā)工作人員的設(shè)計(jì)過程,還能加快頁面載入速度。
本文里面,就讓我們來全面的看一下CSS3的各種新特性。也別忘了檢閱我們之前發(fā)布的一些CSS教程和技巧文章: 60+CSS技巧教程資源大全 CSS3.0相關(guān)資源和參考手冊收集整理 使用瀏覽器專有屬性
為了使用大部分CSS3特性,我們不得不與原來的屬性一起使用生產(chǎn)商專有擴(kuò)展。原因是直到現(xiàn)在,大部分瀏覽器只支持部分CSS3屬性。而且不幸的是,一些屬性甚至到最后都可能不被W3C推薦,所以通過指定瀏覽器專有屬性,將他們與標(biāo)準(zhǔn)屬性區(qū)分開來是很重要的(然后在他們是多余的的時(shí)候使用符合標(biāo)準(zhǔn)的樣式將之覆蓋)。
當(dāng)然,這種方法的劣勢是,將導(dǎo)致一個(gè)雜亂的樣式表和網(wǎng)站在瀏覽器之間的表現(xiàn)不一致。畢竟,我們不想在我們的樣式表中重拾私有瀏覽器hack的需求。 Internet Explorer的臭名昭著的marquee、blink以及其它標(biāo)簽在大量樣式表中被應(yīng)用,并在20世紀(jì)九十年代成為一個(gè)傳奇;它們依然讓現(xiàn)存的很多網(wǎng) 站(在其他瀏覽器中)表現(xiàn)不一致甚至難以閱讀。而我們現(xiàn)在也不想將我們自己置于同樣的境地,對吧?
然而,網(wǎng)站不需要在所有的瀏覽器中看起來必須嚴(yán)格的一致。有的時(shí)候在某個(gè)瀏覽器中使用私有屬性來實(shí)現(xiàn)特定的效果是可行的。
最常見的私有屬性是用于Webkit核心瀏覽器的(比如, Safari), 它們以-webkit-開始,以及Gecko核心的瀏覽器(比如, Firefox),以-moz-開始,還有Konqueror (-khtml-)、Opera (-o-) 以及Internet Explorer (-ms-)都有它們自己的屬性擴(kuò)展(目前只有IE8支持-ms-前綴)
作為專業(yè)的設(shè)計(jì)師,我們不得不注意:使用這些私有屬性將讓我們的樣式表不能通過驗(yàn)證。所以目前將他們放到最終版的樣式中是少見的。但是在某種情況下,比如試驗(yàn)或?qū)W習(xí),我們至少可以考慮將他們和標(biāo)準(zhǔn)的CSS屬性一起寫到一個(gè)樣式表中。擴(kuò)展閱讀 Vendor-specific extensions and W3C Vendor-specific extensions to CSS3 Vendor-specific properties 1. 選擇器
CSS選擇器是個(gè)難以置信地強(qiáng)大的工具:它們允許我們在標(biāo)簽中指定特定的HTML元素而不必使用多余的 class、 ID 或JavaScripts。而且它們中的大部分并不是CSS3中新添加的,而是沒有被得到應(yīng)有的廣泛應(yīng)用。如果你在嘗試實(shí)現(xiàn)一個(gè)干凈的、輕量級的標(biāo)簽以及 結(jié)構(gòu)與表現(xiàn)更好的分離,高級選擇器是非常有用的。它們可以減少在標(biāo)簽中的class和ID的數(shù)量并讓設(shè)計(jì)師更方便的維護(hù)樣式表。屬性選擇器
三個(gè)新的屬性選擇器被添加到CSS3: [att^="value"]
匹配包含以特定的值開頭的屬性的元素 [att$="value"]
匹配包含以特定的值結(jié)尾的屬性的元素 [att*="value"]
匹配包含含有特定的值的屬性的元素
值的屬性的元素

a[title$="tweetCC"] {
position: absolute;
top: 0;
right: 0;
display: block;
width: 140px;
height: 140px;
text-indent: -9999px;
}
瀏覽器支持:只有IE6不支持CSS的屬性選擇器。IE7和IE8、Opera、Webkit核心和Gecko核心的瀏覽器都支持。所以在你的樣式中使用屬性選擇器是比較安全的。 連字符
CSS3中唯一新引入的連字符是通用的兄弟選擇器(同級)。它針對一個(gè)元素的有同一個(gè)父級節(jié)點(diǎn)的所有兄弟級別元素。
比如,給某個(gè)特定的div的同級的圖片添加一個(gè)灰色的邊框(div和圖片應(yīng)該有同一個(gè)父級節(jié)點(diǎn)),在樣式表中定義下面的樣式就足夠了:
div~img {
border: 1px solid #ccc;
}
瀏覽器支持:所有的主要瀏覽器都支持這個(gè)通用的兄弟選擇器除了我們最愛的IE6!偽類
或許在CSS3中增加最多的就是新的偽類了,這里是一些最有趣和最有用的: :nth-child(n)
讓你基于元素在父節(jié)點(diǎn)的子元素的列表位置來指定元素。你可以是用數(shù)字、數(shù)字表達(dá)式或odd 和even 關(guān)鍵詞(對斑馬樣式的列表很完美)。所以如果你想匹配在第四個(gè)元素之后的一個(gè)3個(gè)元素的分組,你可以簡單的這樣使用: :nth-child(3n+4) { background-color: #ccc; }/*匹配第4,7,10,13,16,19...個(gè)元素*/ :nth-last-child(n)
與上個(gè)選擇器的思想同樣,但是從后面匹配元素(倒序),比如,為了指定一個(gè)div里面的最后兩個(gè)段落,我們可以使用下面的選擇器: div p:nth-last-child(-n+2) :last-child
匹配一個(gè)父節(jié)點(diǎn)下的最后一個(gè)子元素,等同于:nth-last-child(1) :checked
匹配選擇的元素,比如復(fù)選框 :empty
匹配空元素(沒有子元素)。 :not(s)
匹配所有不符合指定聲明(s)的元素。比如,如果你想讓所有的沒有使用”lead”類的段落的顯示為黑色,可以這樣寫:
p:not([class*="lead"]) { color: black; }
Andrea Gandino 在他的網(wǎng)站上使用:last-child 為選擇器指定每篇日志的最后一個(gè)段落,并將其的外間距(margin)設(shè)置為0:

#primary .text p:last-child { margin: 0; }
瀏覽器支持: Webkit核心和Opera 瀏覽器支持所有新的CSS3 偽類,F(xiàn)irefox 2 和3 (Gecko核心) 只支持:not(s), :last-child, only-child, :root, :empty, :target, :checked, :enabled 和:disabled,但是Firefox 3.5 將更加廣泛的支持CSS3 選擇器。Trident核心瀏覽器(Internet Explorer)事實(shí)上不支持這些偽選擇器。偽元素
在CSS3中唯一引入的偽元素是::selection.它可以讓你指定被用戶高亮(選中)的元素。
瀏覽器支持: 目前沒有任何一款I(lǐng)nternet Explorer 或Firefox 瀏覽器支持::selection 偽元素。Safari, Opera 和Chrome 均支持。擴(kuò)展閱讀 Selectors Level 3: W3C Working Draft CSS3: Attribute selectors: CSS3.info Compatibility table: CSS3 Selectors CSS selectors and pseudo selectors browser compatibility CSS3 Attribute Selectors ::selection General Sibling Selector CSS3 Pseudo-classes
#p#
2. RGBA和透明度
RGBA 讓你可以不僅僅設(shè)定色彩,還能設(shè)定元素的透明度。一些瀏覽器尚不支持它,所以最好在RGBa前面設(shè)定其它瀏覽器支持的沒有透明的顏色屬性。

Tim Van Damme在鏈接的hover效果上使用了RGBA
在這個(gè)網(wǎng)站上,Tim Van Damme在鼠標(biāo)懸停效果上使用了RGBa;例如,在他的首頁的network鏈接上:
#networks li a:hover,
#networks li a:focus {
background: rgba(164, 173, 183, .15);
}
當(dāng)設(shè)定一個(gè)RGBA 色彩的時(shí)候,我們必須依次設(shè)定紅、藍(lán)、和綠色的值,可以是0-255或百分?jǐn)?shù)。透明值應(yīng)該在0.0到1.0之間,例如0.5 代表50% 的透明度。
RGBA 和opacity 之間的不同是前者只會應(yīng)用到指定的元素上,而后者會影響我們指定的元素及其子元素。
這里有個(gè)例子展示我們?nèi)绾谓o一個(gè)div添加80% 透明:
div { opacity: 0.8; }
瀏覽器支持: RGBA 被Webkit內(nèi)核瀏覽器支持。IE所有版本都不支持。Firefox 2也不支持,但是Firefox 3 和Opera 9.5均支持。Opacity 被Opera、Webkit核心 和Gecko核心的瀏覽器支持。IE所有版本同樣不支持。IE只支持自家的該死的濾鏡(filter)擴(kuò)展閱讀: CSS Color Module Level 3: W3C Working Draft RGBA colors: CSS3.info RGBA color space Is CSS3 RGBa ready to rock? Super-Awesome Buttons with CSS3 and RGBA
#p#
3. 多欄布局
這是新的CSS3 選擇器可以讓你不用使用多個(gè)div標(biāo)簽就能實(shí)現(xiàn)多欄布局。瀏覽器解釋這個(gè)屬性并生成多欄,讓文本實(shí)現(xiàn)一個(gè)仿報(bào)紙的多欄結(jié)構(gòu)。

tweetCC 在其首頁使用了CSS3 多欄選擇器
tweetCC 在其首頁上將介紹文字顯示為四欄。這四欄并非浮動(dòng)的div;相反,設(shè)計(jì)師使用下面的CSS3 多欄布局:
.index #content div {
-webkit-column-count : 4;
-webkit-column-gap : 20px;
-moz-column-count : 4;
-moz-column-gap : 20px;
}
我們可以通過這個(gè)選擇器定義三件事情:欄數(shù)(column-coun)、欄寬(column-width、例子中沒有用到)和各欄之間的空白/間距(column-gap)。 如果column-count未設(shè)定,瀏覽器會在允許的寬度內(nèi)容納盡可能多的欄目。
為了在各欄時(shí)間添加一個(gè)數(shù)值的分隔,我們可以使用column-rule 屬性,其功能和border 屬性類似:
div {
column-rule: 1px solid #00000;
}
上面的這條屬性,瀏覽器中不會看到任何效果,因?yàn)樗鼪]有分欄,如果配合上面的例子就可以了。
相關(guān)屬性: column-break-after, column-break-before, column-span, column-fill.
瀏覽器支持: 多欄布局目前被Safari 3+,chrome,和Firefox 1.5+所支持。擴(kuò)展閱讀: CSS3 module: Multi-column layout: W3C Working Draft Columns CSS3 – Multi-Column Layout Demonstration CSS3 Columns Designing tweetCC Introduction to CSS3 – Part 5: Multiple Columns
#p#
4. 多背景圖
CSS3 允許你使用多個(gè)屬性比如background-image、background-repeat, background-size, background-position, background-originand background-clip等在一個(gè)元素上添加多層背景圖片.
在一個(gè)元素上添加多背景的最簡單的方法是使用簡寫代碼,你可以指定上面的所有屬性到一條聲明中,只是最常用的還是image, position 和repeat:
div {
background: url(example.jpg) top left no-repeat,
url(example2.jpg) bottom left no-repeat,
url(example3.jpg) center center repeat-y;
}
第一個(gè)圖片將是離用戶“最近”的那個(gè)。
該屬性的一個(gè)更復(fù)雜的版本可以是這樣的:
div {
background: url(example.jpg) top left (100% 2em) no-repeat,
url(example2.jpg) bottom left (100% 2em) no-repeat,
url(example3.jpg) center center (10em 10em) repeat-y;
}
在這里,(100% 2em) 是background-size 的值;第一個(gè)背景圖片將會出現(xiàn)在左上角并會被拉伸至該div的100%寬度和2em的高度。
因?yàn)橹挥猩贁?shù)的瀏覽器支持它,又因?yàn)樵诰W(wǎng)站上不顯示背景有損網(wǎng)站的視覺效果,所以,這并不是一個(gè)被廣泛應(yīng)用了的屬性。盡管如此,它顯然能夠大大地提高設(shè)計(jì)師的工作流并顯著減少標(biāo)簽數(shù)量——相對于用其它方式實(shí)現(xiàn)同樣的效果。
瀏覽器支持: 目前,多背景圖片只在Safari/chrome 和Konqueror中有效擴(kuò)展閱讀: Layering multiple background images Multiple backgrounds with CSS3 and CSS3.info Introduction to CSS3, Part 6: Backgrounds
#p#
5. Word Wrap
word-wrap 屬性用來防止太長的字符串溢出的??梢杂脙蓚€(gè)屬性值normal 和break-word。normal 值(默認(rèn)的) 只在允許的斷點(diǎn)截?cái)辔淖?,如連字符。如果使用了break-word ,文字可以在任何需要的地方截?cái)嘁云ヅ浞峙涞目臻g并防止溢出。

WordPress 后臺在數(shù)據(jù)表中使用了word-wrap.
在WordPress 的控制面板中,word-wrap 屬性被用于表格中的元素;比如在日志和頁面的列表中:
.widefat * {
word-wrap: break-word;
}
瀏覽器支持: word-wrap 被Internet Explorer 和Safari/chrome支持。Firefox 將在3.5版本中支持它。 擴(kuò)展閱讀: Force Wrapping: the ‘word-wrap’ property — CSS Text Level 3: W3C Working Draft word-wrap: CSS3.info CSS word-wrap word-wrap: Mozilla Developer Center
#p#
6. 文字陰影
盡管在CSS2中就已經(jīng)存在,text-shadow是一個(gè)未被廣泛應(yīng)用的CSS屬性。但是它將在CSS3中被廣泛采用。這個(gè)屬性給設(shè)計(jì)師一個(gè)新的跨瀏覽器的工具來為設(shè)計(jì)添加一個(gè)維度以使文字醒目。
盡管這樣,你需要確認(rèn),你的設(shè)計(jì)中的文字是可讀的,以防用戶的瀏覽器不支持CSS3高級屬性。給文字和背景色彩足夠的對比度以防text-shadow 屬性不能被瀏覽器正確渲染或理解。

Beakapp 在它的網(wǎng)站中使用了text-shadow 屬性:內(nèi)容區(qū)域.
BeakApp.com 為內(nèi)容區(qū)域使用了text-shadow 屬性,為文字添加深度和維度 并讓它變得醒目——而不是使用某種圖片替換技術(shù)。該屬性目前只在Safari和Chrome中可用。
該網(wǎng)站的主菜單使用的CSS如下:
.signup_area p {
text-shadow: rgba(0,0,0,.8) 0 1px 0;
}
這里我們使用陰影顏色(使用了RGBA,前面有描述), 然后是右(x 坐標(biāo)) 和底部(y 坐標(biāo)) 偏移,最后是模糊半徑
如果要在一個(gè)文字上使用多陰影,可以使用逗號分開。比如:
p {
text-shadow: red 4px 4px 2px,
yellow -4px -4px 2px,
green -4px 4px 2px;
}
瀏覽器支持: Webkit核心瀏覽器和Opera 9.5 支持text-shadow。Internet Explorer 不支持它,F(xiàn)irefox 將在即將發(fā)行的3.5版本中支持。 擴(kuò)展閱讀: Text Shadows: the ‘text-shadow’ property — W3C Working Draft Text shadows: Web Style Sheets CSS tips and tricks Text-shadow, Photoshop like effects using CSS — CSS3.info Make Cool And Clever Text Effects With CSS Text-Shadow Safari’s Text-Shadow Anti-Aliasing CSS Hack text-shadow text-shadow: Mozilla Developer Center
#p#
7. @font-face屬性
盡管是最被期待的CSS3 特性 (甚至它在CSS2中就已經(jīng)被引入了), @font-face在網(wǎng)站上仍然沒有像其它CSS3屬性那樣被廣泛采用.這主要因?yàn)樽煮w授權(quán)和版權(quán)問題:嵌入的字體很容易從網(wǎng)站上下載到,這是字體廠商的主要顧慮。
盡管如此,授權(quán)我呢提貌似已經(jīng)開始解決了。TypeKit 承諾將制定一個(gè)方案,以使設(shè)計(jì)師和字體廠商更容易的統(tǒng)一授權(quán)問題,這將顯著的充實(shí)網(wǎng)站設(shè)計(jì)中的排版并使@font-face 屬性在實(shí)際工作中可用。

Mozilla實(shí)驗(yàn)室JetPack 網(wǎng)站采用font-face規(guī)則來使用DroidSans 字體。
少數(shù)使用該屬性的網(wǎng)站之一是新上線的JetPack MozillaLabs.
@font-face{
font-family: 'DroidSans';
src: url('../fonts/DroidSans.ttf') format('truetype');
}
要想在你的網(wǎng)站中使用嵌入字體,你必須獨(dú)立的生命每個(gè)樣式(比如, normal, bold 和italic)。請確保只使用被授權(quán)為使用到網(wǎng)站的字體并在需要的時(shí)候給字體的設(shè)計(jì)師一些表揚(yáng)。
在定義了@font-face 規(guī)則之后,你就可以用普通的font-family 屬性來引用該字體了:
p {
font-family: "DroidSans";
}
如果一個(gè)瀏覽器不支持@font-face,它將使用font-family(CSS 字體庫)屬性中指定的下一個(gè)字體。對支持的瀏覽器來說,如果@font-face 字體是一個(gè)奢侈品(只有少數(shù)元素用到),這對一些網(wǎng)站是可行的;但是如果該字體在設(shè)計(jì)中占有一個(gè)主要的角色或者是公司的視覺特征的一部分,你就可能想使用 其它的解決方案,比如sIFR 或Cufón。盡管如此,請記住,這些工具對標(biāo)題或較短的文字更適合,復(fù)制和粘貼此類內(nèi)容比較困難而且對用戶并不友好。

在網(wǎng)站中使用此類字體不是很好嗎?Dave Shea 使用Cufón 和Museo Sans來做的實(shí)驗(yàn)。很漂亮!
瀏覽器支持: @font-face 被Safari 3.1+和chrome支持。Internet Explorer 支持 字體。 Opera 10 和Firefox 3.5 將會支持它。 字體。 Opera 10 和Firefox 3.5 將會支持它。 擴(kuò)展閱讀: Font Descriptions and @font-face — W3C Working Draft Web fonts with @font-face @font-face — Sitepoint Fonts available for @font-face embedding @font-face beautiful fonts with @font-face Introducing Typekit
#p#
8. 圓角(邊框半徑)
Border-radius 無需背景圖片就能給HTML元素添加圓角?,F(xiàn)在,它可能是使用最多的CSS3屬性了,很簡單的原因是使用圓角比較好而且不會對設(shè)計(jì)和可用性有沖突。
不同于添加Javascript或多于的HTML標(biāo)簽,僅僅需要添加一些CSS屬性并從好的方面考慮。這個(gè)方案是清晰的和比較有效的,而且可以讓你免于花費(fèi)幾個(gè)小時(shí)來尋找精巧的瀏覽器方案和基于Javascript圓角。

Sam Brown的博客在標(biāo)題、分類和鏈接處使用了border-radius.
Sam Brown在他的博客的標(biāo)題、分類、鏈接和div中大量的使用了border-radius屬性。使用圖片來實(shí)現(xiàn)該效果將會比較費(fèi)時(shí)的,這是在項(xiàng)目中使用CSS3屬性是提高開發(fā)效率的重要步驟的原因之一
為了給類別鏈接添加圓角,Sam 使用了下面的CSS片段:
h2 span {
color: #1a1a1a;
padding: .5em;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}
我們可以做的更進(jìn)一步,添加原始的CSS3 屬性和Konqueror 屬性擴(kuò)展,如下:
h2 span {
color: #1a1a1a;
padding: .5em;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-khtml-border-radius: 6px;
border-radius: 6px;
}
如果我們想在我們的元素中的某個(gè)特定的角上應(yīng)用此屬性,我們可以單獨(dú)的指定每個(gè)角:
div {
-moz-border-radius-topright: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;
-webkit-border-top-right-radius: 6px;
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
}
瀏覽器支持: border-radius只有所有版本的IE瀏覽器和Opera不支持,Webkit和Gecko核心的瀏覽器都支持。 擴(kuò)展閱讀: border-radius: W3C Working Draft Border-radius: create rounded corners with CSS! — CSS3.info Introduction to CSS3, Part 2: Borders An Ode to border-radius CSS3 Border-Radius and Rounded Corners
#p#
9. 邊框圖片
border-image 屬性允許你在元素的邊框上設(shè)定圖片, 讓你從通常的solid, dotted 和其它邊框樣式中解放出來。該屬性給設(shè)計(jì)師一個(gè)更好的工具,用它可以方便的定義設(shè)計(jì)元素的邊框樣式,比background-image 屬性(對高級設(shè)計(jì)來說) 或枯燥的默認(rèn)邊框樣式更好用。我們也可以明確的定義一個(gè)邊框可以被如何縮放或平鋪。

SpoonGraphics 博客為它的圖片邊框使用了border-image 屬性。
在SpoonGraphis blog中,border-image被用于圖片邊框,如下所示:
#content .post img {
border: 6px solid #f2e6d1;
-webkit-border-image: url(main-border.png) 6 repeat;
-moz-border-image: url(main-border.png) 6 repeat;
border-image: url(main-border.png) 6 repeat;
}
要想定義border-image,我們必須指定圖片地址,圖片的那部分將被剪切并用于元素的每一個(gè)邊上,以及圖片是否被縮放或平鋪。
為了制作一個(gè)使用下面的圖片作為邊框的div ,我們應(yīng)該使用下面的代碼(我們將為這個(gè)例子添加Opera 和Konqueror 支持):

div {
border-width: 18px 25px 25px 18px;
-webkit-border-image: url(example.png) 18 25 25 18 stretch stretch;
-moz-border-image: url(example.png) 18 25 25 18 stretch stretch;
-o-border-image: url(example.png) 18 25 25 18 stretch stretch;
-khtml-border-image: url(example.png) 18 25 25 18 stretch stretch;
border-image: url(example.png) 18 25 25 18 stretch stretch;
}
該屬性的最后一個(gè)值可以是stretch (默認(rèn)), round (只有一個(gè)平鋪了整數(shù)倍的圖片被填充在允許的地方) 或repeat。在我們的例子中,上下左右邊框圖片被拉伸。如果我們只想頂部和底部邊框被拉伸,我們可以使用下面的CSS:
div {
(...)
border-image: url(example.png) 18 25 25 18 stretch repeat;
}
我們可以可以單獨(dú)的指定每一個(gè)角,如果我們想為每一個(gè)角使用不同的圖片:
div {
border-top-image: url(example.png) 5 5 stretch;
border-right-image: url(example.png) 5 5 stretch;
border-bottom-image: url(example.png) 5 5 stretch;
border-left-image: url(example.png) 5 5 stretch;
border-top-left-image: url(example.png) 5 5 stretch;
border-top-right-image: url(example.png) 5 5 stretch;
border-bottom-left-image: url(example.png) 5 5 stretch;
border-bottom-right-image: url(example.png) 5 5 stretch;
}
如果瀏覽器不支持border-image 屬性,它將無視這些屬性,并只應(yīng)用定義的其它邊框?qū)傩?,比如border-width 和border-color.
瀏覽器支持: border-image 目前只有Webkit核心瀏覽器支持。不太確定Firefox的下一個(gè)版本是否支持。 擴(kuò)展閱讀: The ‘border-image’ property: W3C Working Draft Border-image: using images for your border — CSS3.info border-image in Firefox border-image demonstration page Replicating iPhone Buttons the “webkit” way!
#p#
10. 盒陰影
box-shadow 屬性可以對HTML元素添加陰影 而不用額外的標(biāo)簽或背景圖片。類似text-shadow 屬性,它增強(qiáng)設(shè)計(jì)的細(xì)節(jié);而且因?yàn)樗挥绊憙?nèi)容的可讀性,隨意他可以是增加那種額外感覺/效果的一種很好的方法。

10to1 為它的導(dǎo)航背景和hover狀態(tài)使用了box-shadow 屬性.
10to1 為其導(dǎo)航區(qū)域增加的一個(gè)簡單的陰影并將該屬性應(yīng)用于導(dǎo)航鏈接的hover效果:
#navigation {
-webkit-box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
}
#navigation li a:hover,
#navigation li a:focus {
-webkit-box-shadow: 0 0 5px #111;
-moz-box-shadow: 0 0 5px #111;
}
box-shadow屬性可以用多個(gè)值:水平偏移、垂直偏移、模糊半徑、伸展半徑和陰影顏色。水平和垂直偏移和陰影色使用的最多。
在一個(gè)div上應(yīng)用紅色陰影,右邊和下邊偏移4px,無模糊,我們可以使用下面的代碼:
div {
-moz-box-shadow: 4px 4px 0 #f00;
-webkit-box-shadow: 4px 4px 0 #f00;
box-shadow: 4px 4px 0 #f00;
}
瀏覽器支持: box-shadow目前只有Webkit核心瀏覽器支持,但是即將發(fā)布的Firefox 3.5 也將提供很好的支持。 擴(kuò)展閱讀: The ‘box-shadow’ property — W3C Working Draft Box-shadow, one of CSS3’s best new features — CSS3.info Apple’s Navigation bar using only CSS Box Shadow — Surfin’ Safari blog
#p#
11. 盒子大小
根據(jù)CSS 2.1 規(guī)范,在計(jì)算盒子的總大小的時(shí)候,元素的邊框和padding應(yīng)該被加入到寬度和高度之中的。但是眾所周知,舊的瀏覽器卻以它們自己的非常有“創(chuàng)意”的方式來解釋這個(gè)規(guī)范。box-sizing屬性允許你指定瀏覽器如何計(jì)算一個(gè)元素的寬度和高度。

WordPress 在控制面板的所有的輸入框元素中使用border-box 屬性。
WordPress 后臺區(qū)域在它的所有text類型的input標(biāo)簽和textarea標(biāo)簽上使用了該屬性:
input[type="text"],
textarea {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
第三個(gè)屬性(-ms-box-sizing) 只有在Internet Explorer 8下有效。通過其他選擇器,WordPress 的樣式表同樣添加了Konqueror 屬性: -khtml-box-sizing。
box-sizing 屬性可以兩個(gè)值中的一個(gè):border-box 和content-box。 Content-box如CSS2.1中的定義的那樣渲染寬度。Border-box 從設(shè)定的寬度和高度中扣除padding和邊框(如老式瀏覽器那樣。)。
瀏覽器支持:box-sizing 被IE8、Opera、Gecko核心和Webkit核心瀏覽器支持。 擴(kuò)展閱讀: ‘box-sizing’ property: W3C Candidate Recommendation Box-sizing, box-model fixes for the simple people: CSS3.info CSS3 box-sizing attribute
#p#
12. 媒體查詢
媒體查詢(media queries)可以讓你為不同的設(shè)備基于它們的能力定義不同的樣式。比如,在可視區(qū)域小于480像素的時(shí)候,你可能想讓網(wǎng)站的側(cè)欄顯示在主內(nèi)容的下邊,這樣它就不應(yīng)該浮動(dòng)并顯示在右側(cè)了:
#sidebar {
float: right;
display: inline; /* IE Double-Margin Bugfix */
}
@media all and (max-width:480px) {
#sidebar {
float: none;
clear: both;
}
}
你也可以指定使用慮色屏的設(shè)備:
a {
color: grey;
}
@media screen and (color) {
a {
color: red;
}
}
潛力是無限的。這個(gè)屬性是很有用的因?yàn)槟隳悴辉谛枰仨殲椴煌脑O(shè)備寫?yīng)毩⒌臉邮奖砹耍夷阋矡o需使用JS來確定每個(gè)用戶的瀏覽器的屬性和功能。一個(gè)實(shí)現(xiàn)一個(gè)靈活的布局的更加流行的基于Javascript的方案是使用智能的流體布局,讓布局對于用戶的瀏覽器分辨率更加靈活。
瀏覽器支持: 媒體查詢被基于webkit核心的瀏覽器和Opera支持。Firefox將在3.5版本中支持它。IE目前不支持這些屬性而且在將來的版本中,也沒有支持的計(jì)劃。 擴(kuò)展閱讀: 媒體查詢: W3C 候選推薦 擴(kuò)展到CSS 3 媒體查詢 媒體查詢: CSS3.info The bleeding edge of web: media queries 安全的媒體查詢 媒體類型
#p#
13. 語音
CSS3的語音模塊CSS3可以讓你為屏幕閱讀者指定語音樣式。你可以控制語音的不同設(shè)置,比如: voice-volume
使用從0到100的數(shù)字(0 即靜音)、百分?jǐn)?shù)或關(guān)鍵詞(silent,x-soft,soft,medium,loud 和x-loud等)來設(shè)置音量。 voice-balance
控制來自哪個(gè)聲道(如果用戶的音箱系統(tǒng)支持立體聲)。 Speak
指示屏幕閱讀器閱讀相關(guān)的文字、數(shù)字或標(biāo)點(diǎn)符號??捎玫年P(guān)鍵詞為none, normal, spell-out, digits, literal-punctuation, no-punctuation 和inherit. Pauses and rests
在一個(gè)元素的被讀完之前或之后設(shè)定暫?;蛲V?。你可以使用時(shí)間單位(比如, “2s” 表示2 秒鐘) 或關(guān)鍵詞(none,x-weak, weak, medium, strong 和x-strong)。 Cues
使用聲音限制特定元素并控制器音量。 voice-family
設(shè)定特定的聲音類型和聲音合成(就像font-family)。 voice-rate
控制閱讀的速度。可以設(shè)置為百分?jǐn)?shù)或關(guān)鍵詞: x-slow, slow,medium, fast 和x-fast. voice-stress
指示應(yīng)該使用的任何重音(強(qiáng)語氣),使用不同的關(guān)鍵詞: none, moderate,strong 和 reduced.
比如,告訴屏幕閱讀器使用男聲讀取所有的h2 標(biāo)簽,用左邊的喇叭,用軟調(diào)按照指定的聲音,可以像下面這樣指定樣式:
h2 {
voice-family: female;
voice-balance: left;
voice-volume: soft;
cue-after: url(sound.au);
}
不幸的是,這個(gè)屬性現(xiàn)在只有非常少的支持,但是顯然值得關(guān)注因?yàn)槲覀兛梢栽趯硖岣呶覀兙W(wǎng)站的易用性。
瀏覽器支持: 現(xiàn)在,只有Opera 瀏覽器(Windows XP and 2000)支持語音模塊的部分屬性。為了使用它們,需要使用-xv- 前綴,比如-xv-voice-balance: right。 擴(kuò)展閱讀: CSS3 語音模塊——W3C 工作草案 CSS3 語音 — CSS3.info 聽覺CSS: 支持CSS 2 聽覺樣式表 / CSS 3 語音模塊 結(jié)尾
CSS3 屬性可以極大的提高你的工作流,讓一些最耗時(shí)的CSS任務(wù)不費(fèi)吹灰之力就能搞定,并且可以使用更好、更簡潔和更輕的代碼標(biāo)簽。一些屬性尚未被廣泛的支持,甚至是最新的瀏覽器,但這并不意味著我們不能用它們進(jìn)行試驗(yàn)或者為使用先進(jìn)瀏覽器的用戶更高級的功能和CSS樣式。
在這點(diǎn)兒上,請記住,培養(yǎng)我們的用戶 也同樣是有用和必須的:網(wǎng)站無需看起來在每個(gè)瀏覽器里都要保持一致,而且如果一個(gè)差異不(負(fù)面)影響美學(xué)和網(wǎng)站的可用性,它就應(yīng)該是被考慮的。如果我們繼續(xù)浪費(fèi)大量的時(shí)間和金錢以使每個(gè)細(xì)節(jié)絕對一致(而不是采用更靈活的和未來導(dǎo)向的方案), 用戶將沒有升級他們的瀏覽器的任何需要/動(dòng)機(jī),這樣我們就不得不在舊的瀏覽器變?yōu)楣哦墳g覽器以及強(qiáng)大的現(xiàn)代瀏覽器變?yōu)闃?biāo)準(zhǔn)之前等待很長的時(shí)間
我們試驗(yàn)和使用新的CSS3屬性越早,它們就被流行的瀏覽器支持的更早,我們也就能夠更早的廣泛使用它們。推薦閱讀及資源: CSS3 Previews: CSS3.info CSS 3: Exciting Function and Features: 30 Useful Tutorials 5 CSS3 Techniques For Major Browsers using the Power of jQuery Introduction to CSS3 – Part 1: What is it? Comparison of layout engines (Cascading Style Sheets) and Wikipedia Progressive enhancement Five CSS design browser differences I can live with Progressive Enhancement with CSS CSS support in Opera 9.5 關(guān)于原作者
Inayaili de León是一個(gè)葡萄牙的網(wǎng)頁設(shè)計(jì)師。她對網(wǎng)頁設(shè)計(jì)和前端編碼真的非常感興趣,而且喜歡漂亮和簡潔的網(wǎng)站。她居住在倫敦。你可以在Web Designer Notebook上看到她的更多文章,并follow her on Twitter.
相關(guān)文章
CSS3 最強(qiáng)二維布局系統(tǒng)之Grid 網(wǎng)格布局
CS3的Grid網(wǎng)格布局是目前最強(qiáng)的二維布局系統(tǒng),可以同時(shí)對列和行進(jìn)行處理,將網(wǎng)頁劃分成一個(gè)個(gè)網(wǎng)格,可以任意組合不同的網(wǎng)格,做出各種各樣的布局,本文介紹CSS3 最強(qiáng)二維布局系2025-02-27- 本文介紹了如何使用CSS3的transform屬性和動(dòng)畫技巧實(shí)現(xiàn)波浪式圖片墻,通過設(shè)置圖片的垂直偏移量,并使用動(dòng)畫使其周期性地改變位置,可以創(chuàng)建出動(dòng)態(tài)且具有波浪效果的圖片墻,同2025-02-27
CSS3模擬實(shí)現(xiàn)一個(gè)雷達(dá)探測掃描動(dòng)畫特效(最新推薦)
文章介紹了如何使用CSS3實(shí)現(xiàn)一個(gè)雷達(dá)探測掃描的效果,包括夜色背景、蜘蛛網(wǎng)盤、掃描體的轉(zhuǎn)動(dòng)效果、尾巴陰影以及被掃描到的光點(diǎn),通過HTML和CSS的配合,實(shí)現(xiàn)了豐富的動(dòng)畫效果,2025-02-21- CSS3的Flexbox是一種強(qiáng)大的布局模式,通過設(shè)置display:flex可以輕松實(shí)現(xiàn)對齊、排列和分布網(wǎng)頁元素,它解決了傳統(tǒng)布局方法中的對齊、間距分配和自適應(yīng)布局等問題,接下來通過本2025-02-19
css3 實(shí)現(xiàn)icon刷新轉(zhuǎn)動(dòng)效果
本文給大家介紹css3 實(shí)現(xiàn)icon刷新轉(zhuǎn)動(dòng)效果,文章開頭給大家介紹了webkit-transform、animation、@keyframes這三個(gè)屬性,結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一2025-02-19CSS3動(dòng)態(tài)效果之過渡屬性(最新推薦)
CSS3過渡屬性用于實(shí)現(xiàn)元素從一種樣式平滑過渡到另一種樣式,通過設(shè)置transition-property過渡屬性、transition-duration過渡時(shí)長transition-timing-function過渡函數(shù)和trans2025-02-19CSS3實(shí)現(xiàn)動(dòng)態(tài)旋轉(zhuǎn)加載樣式的示例代碼
本文介紹了如何使用CSS3創(chuàng)建一個(gè)簡單的動(dòng)態(tài)旋轉(zhuǎn)加載樣式,通過定義一個(gè)帶有類名“l(fā)oader”的HTML元素,并使用CSS樣式和@keyframes規(guī)則來實(shí)現(xiàn)旋轉(zhuǎn)動(dòng)畫,你可以根據(jù)需要調(diào)整樣式2025-02-19使用CSS3實(shí)現(xiàn)平滑的過渡動(dòng)畫效果(實(shí)例代碼)
這篇文章主要介紹了如何使用CSS3的transition屬性實(shí)現(xiàn)平滑的過渡動(dòng)畫,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2025-02-13CSS3中使用flex和grid實(shí)現(xiàn)等高元素布局的示例代碼
本文介紹了使用CSS3中的Flexbox和Grid布局實(shí)現(xiàn)等高元素布局的方法,通過簡單的兩列實(shí)現(xiàn)、每行放置3列以及全部代碼的展示,展示了這兩種布局方式的實(shí)現(xiàn)細(xì)節(jié)和效果,感興趣的朋2025-02-11使用CSS3和SVG創(chuàng)建圓形進(jìn)度條動(dòng)畫效果
CSS3和SVG的結(jié)合使用為網(wǎng)頁設(shè)計(jì)帶來了創(chuàng)新的動(dòng)態(tài)視覺效果,本文通過一個(gè)圓形進(jìn)度條的動(dòng)畫特效示例,展示了如何利用CSS3的動(dòng)畫功能和SVG的矢量圖形能力來創(chuàng)建豐富的用戶交互體2024-10-24