CSS3的使用方法

1、CSS3 新增屬性用法整理  OS -> winXPBrowsers -> IE6+, FF 3.0.11, FF 3.5, Opera 10 beta 2, Safari 4, Chrome 3.0.195【說(shuō)明】：-moz代表firefox瀏覽器私有屬性-ms代表IE瀏覽器私有屬性-webkit代表chrome、safari私有屬性一. box-shadow(陰影效果)2二. border-colors(為邊框設(shè)置多種顏色)2三. boder-image(圖片邊框)2四. text-shadow(文本陰影)3五. text-overflow(文本截

2、斷)3六. word-wrap(自動(dòng)換行)3七. border-radius(圓角邊框)4八.   opacity(不透明度)4九. box-sizing(控制盒模型的組成模式)4十. resize(元素縮放)5十一. outline(外邊框)5十二. background-size(指定背景圖片的尺寸)5十三. background-origin(指定背景圖片從哪里開(kāi)始顯示)6十四. background-clip(指定背景圖片從什么位置開(kāi)始裁切)6十五.  background(為一個(gè)元素指定多個(gè)背景)6十六. hsl(通過(guò)色調(diào), 飽和度, 亮度來(lái)指定顏色值)7十七.

3、hsla(在hsl的基礎(chǔ)上上增加了一個(gè)透明度設(shè)置)7十八. rgba(基于r,g,b三個(gè)顏色通道來(lái)設(shè)置顏色值, 通過(guò)a來(lái)設(shè)置透明度)7一. box-shadow(陰影效果) 使用: -moz-box-shadow: 20px 10px 0 #000; -webkit-box-shadow: 20px 10px 0 #000;支持:        FF3.5, Safari 4, Chrome 3二. border-colors(為邊框設(shè)置多種顏色)使用:      說(shuō)明:   

4、;     顏色值數(shù)量不固定, 且FF的私有寫(xiě)法不支持縮寫(xiě): -moz-border-colors: #333 #444 #555;支持:      FF3+三. boder-image(圖片邊框)使用:  說(shuō)明:(1). 20 20 20 20 -> 邊框的寬度, 分別對(duì)應(yīng)top, right, bottom, left邊框, 改變寬度可以實(shí)現(xiàn)不同的效果;(2). 邊框圖片效果(目前僅實(shí)現(xiàn)了兩種):       repeat - 邊框圖片會(huì)平鋪, 類似于背景重復(fù);&#

5、160;     stretch - 邊框圖片會(huì)以拉伸的方式來(lái)鋪滿整個(gè)邊框;(3). 必須將元素的邊框厚度設(shè)置為非0非auto值. 支持:       FF 3.5, Safari 4, Chrome 3四. text-shadow(文本陰影)使用:  text-shadow: <顏色><水平偏移><縱向偏移><模糊半徑> | <水平偏移><縱向偏移><模糊半徑><顏色>

6、說(shuō)明:(1) <顏色>和<模糊半徑>是可選的, 當(dāng)<顏色>未指定時(shí), 將使用文本顏色; 當(dāng)<模糊半徑>未指定時(shí), 半徑值為0;(2) shadow可以是逗號(hào)分隔的列表, 如:     text-shadow: 2px 2px 2px #ccc, 3px 3px 3px #ddd;(3) 陰影效果會(huì)按照shadow list中指定的順序應(yīng)用到元素上;(4) 這些陰影效果有可能相互重疊, 但不會(huì)疊加文本本身;(5) 陰影可能會(huì)跑到容器的邊界之外, 但不會(huì)影響容器

7、的大小.支持:       FF 3.5, Opera 10, Safari 4, Chrome 五. text-overflow(文本截?cái)?使用:       text-overflow: inherit | ellipsis | clip ;       -o-text-overflow: inherit | ellipsis | clip;說(shuō)明: (1) 還有一個(gè)屬性ellipsis-word, 但各瀏覽器均不支持.支持:

8、0;       IE6+, Safari4, Chrome3, Opera10六. word-wrap(自動(dòng)換行)使用:       word-wrap: normal | break-word;支持:       IE6+, FF 3.5, Safari 4, Chrome 3七. border-radius(圓角邊框)使用:       支持: FF 3+, Safari 4, Chrome 3

9、60;八.   opacity(不透明度)   使用:             filter: alpha(opacity=50); /* for IE6, 7 */       -ms-filter(opacity=50); /* for IE8 */支持:        all九. box-sizing(控制盒模型的組成模式)使用:    說(shuō)明:    

10、  1. content-box:       使用此值時(shí), 盒模型的組成模式是, 元素寬度 = content + padding + border;      2. border-box:       使用此值時(shí), 盒模型的組成模式是, 元素寬度 = content(即使設(shè)置了padding和border, 元素的寬度      也不會(huì)變).支持:    

11、;   FF3+, Opera 10, Safari 4, Chrome 3十. resize(元素縮放)使用:        resize: none | both | horizontal | vertical;說(shuō)明:       1. 必須將元素的overflow屬性設(shè)置為auto或hidden, 該屬性才能起作用(overflow設(shè)置為visible時(shí), 無(wú)效);       2. 屬性值說(shuō)明:     &#

12、160; (1). none -> 禁用縮放;       (2). both -> 可同時(shí)縮放寬度和高度;       (3). horizontal -> 僅能縮放寬度;       (4). vertical -> 僅能縮放高度;支持:       safari 4, chrome 3十一. outline(外邊框)使用:       outline: 邊框厚度 邊框

13、樣式 邊框顏色;       outline-offset: 偏移值;說(shuō)明:       outline-offset需要獨(dú)立寫(xiě), 簡(jiǎn)寫(xiě)是無(wú)效的.支持:       FF3+, safari 4, chrome 3, opera 10十二. background-size(指定背景圖片的尺寸)使用:       -o-background-size: length | percentage 1, 2;    

14、;   -webkit-background-size: length | percentage 1, 2;例如:       -o-background-size: 50px 60px;       -webkit-background-size: 50px 60px;       這會(huì)將背景圖片的寬設(shè)置了50px, 高60px.支持:       safari 4, chrome 3

15、, opera 10  十三. background-origin(指定背景圖片從哪里開(kāi)始顯示) 使用:        -webkit-background-origin: border | padding | content;       -moz-background-origin: border | padding | content;  說(shuō)明:       (1) border -> 從bor

16、der區(qū)域開(kāi)始顯示背景;       (2) padding -> 從padding區(qū)域開(kāi)始顯示背景;       (3) content -> 從content區(qū)域開(kāi)始顯示背景;注意:       必須先指定background屬性, 然后才能指定該屬性, 如果該屬性出現(xiàn)在background屬性之前, 會(huì)無(wú)效.支持:       safari 4, chrome 3, FF 3+&

17、#160;        十四. background-clip(指定背景圖片從什么位置開(kāi)始裁切)使用:        -webkit-background-origin: border-box | padding-box | content-box | no-clip;說(shuō)明:       (1) border-box -> 從border區(qū)域向外裁剪背景;      

18、(2) padding-box -> 從padding區(qū)域向外裁剪背景;       (3) content-box -> 從content區(qū)域向外裁剪背景;       (4) no-clip -> 不裁切背景.注意:       必須先指定background屬性, 然后才能指定該屬性, 如果該屬性出現(xiàn)在background屬性之前, 會(huì)無(wú)效.支持:    

19、;   safari 4, chrome 3十五.  background(為一個(gè)元素指定多個(gè)背景)使用:        background: background-image | background-origin | background-clip | background-repeat | background-size | background-position例子:       background: url(bg1.png) no-repeat lef

20、t top, url(bg2.png) no-repeat right bottom;支持:       safari 4, chrome 3十六. hsl(通過(guò)色調(diào), 飽和度, 亮度來(lái)指定顏色值)使用:       hsl: (<length> | <percentage> | <percentage>);說(shuō)明:       (1) length: h(色調(diào)),  0(或360)表示紅色, 120表示綠色, 240表示

21、藍(lán)色;       (2) percentage: s(飽和度),  取值為0%到100%之間的值;       (3) percentage: l(亮度),  取值為0%到100%之間的值;例子:       background: hsl(240, 50%, 100%);       color: hsl(100, 80, 100%);支持:       safari 4, chrome 3, FF3, opera 10十七. hsla(在hsl的基礎(chǔ)上上增加了一個(gè)透明度設(shè)置)使用:       hsla: (<length> | <percentage> | <percentag