CSS3的新特性介紹
2024-07-11 08:43:48
供稿：網友
邊框：(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:平均分配列間距
