邊框:(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:平均分配列間距