DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS3的新特性介紹
CSS3的新特性介紹
編輯:CSS詳解     

邊框:(Borders)

border-color:控制邊框顏色,並且有了更大的靈活性,可以產生漸變效果

border-image:控制邊框圖象

border-corner-image:控制邊框邊角的圖象

border-radius:能產生類似圓角矩形的效果

背景(Backgrounds)

background-origin:決定了背景在盒模型中的初始位置,提供了3個值,border, padding和content

border:控制背景起始於左上角的邊框

padding:控制背景起始於左上角的留白

content:控制背景起始於左上角的內容

background-clip:決定邊框是否覆蓋住背景(默認是不覆蓋),提供了兩個值,border和padding

border:會覆蓋住背景

padding:不會覆蓋背景

background-size:可以指定背景大小,以象素或百分比顯示。當指定為百分比時,大小會由所在區域的寬度、高度,以及background-origin的位置決定

multiple backgrounds:多重背景圖象,可以把不同背景圖象只放到一個塊元素裡。

文字效果:(Text effects)

text-shadow:文字投影,可能是因為Mac OSX的Safari浏覽器開始支持投影才特意增加的。

text -overflow:當文字溢出時,用"..."提示。包括ellipsis、clip、ellipsis-Word、inherit,前兩個CSS2就有了,目前還是部分支持,但有趣的是IE6居然也支持。ellipsis-Word可以省略掉最後一個單詞,對中文意義不大,inherit可以繼承父級元素。

顏色:(Color)

HSL colors:除了支持RGB眼色外,還支持HSL(色相、飽和度、亮度)。以前一般都是作圖的時候用HSL色譜,但這樣一來會包括更多的顏色。H用度表示,S和L用百分比表示,比如hsl(0,100%, 50%)
HSLA colors:加了個不透明度(Apacity),用0到1之間的數來表示,比如hsla(0,100%,50%,0.2)
opacity:直接控制不透明度,用0到1之間的數來表示
RGBA colors:和HSLA colors類似,加了個不透明度

用戶界面(User-interface)

resize:可以由用戶自己調整div的大小,有horizontal(水平)vertical(垂直)或者both(同時),或者同時調整。如果再加上max-width或min-width的話還可以防止破壞布局

選擇器:(Selectors)

Attribute selectors:在屬性中可以加入通配符,包括^,$,*

[att^=val]:表示開始字符是val的att屬性

[att$=val]:表示結束字符是val的att屬性

[att*=val]:表示包含至少有一個val的att屬性

其它模塊:(Other modules)

media querIEs:感覺叫媒體選擇比較合適,可以為網頁中不同的對象設置不同的浏覽設備。比如可以為某一塊分別設置屏幕浏覽樣式和手機浏覽樣式,以前則只能設置整個網頁。

multi-column layout:多列布局,讓文字以多列顯示,包括column-width、column-count、column-gap三個值

column-width:指定每列寬度
column-count:指定列數
column-gap:指定每列之間的間距
column-rule-color:控制列間的顏色
column-rule-style:控制列間的樣式
column-rule-width:控制列間的寬度
column-space-distribution:平均分配列間距

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