CSS基礎文章:CSS3的新特性介紹

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

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈