最重要的 CSS3 模塊包括：

• 選擇器
• 框模型
• 背景和邊框
• 文本效果
• 2D/3D 轉(zhuǎn)換
• 動畫
• 多列布局
• 用戶界面

CSS3 邊框 CSS3 邊框 通過 CSS3，您能夠創(chuàng)建圓角邊框，向矩形添加陰影，使用圖片來繪制邊框 - 并且不需使用設(shè)計(jì)軟件，比如 PhotoShop。

• border-radius
• box-shadow
• border-image

CSS3 圓角邊框 在 CSS2 中添加圓角矩形需要技巧。我們必須為每個圓角使用不同的圖片。 在 CSS3 中，創(chuàng)建圓角是非常容易的。 在 CSS3 中，border-radius 屬性用于創(chuàng)建圓角： 實(shí)例 向 div 元素添加圓角： div { border:2px solid; border-radius:25px; -moz-border-radius:25px; /* Old Firefox */ } CSS3 邊框陰影 在 CSS3 中，box-shadow 用于向方框添加陰影： 實(shí)例 向 div 元素添加方框陰影： div { box-shadow: 10px 10px 5px #888888; } CSS3 邊框圖片 通過 CSS3 的 border-image 屬性，您可以使用圖片來創(chuàng)建邊框： 實(shí)例 使用圖片創(chuàng)建圍繞 div 元素的邊框： div { border-image:url(border.png) 30 30 round; -moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */ -webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */ -o-border-image:url(border.png) 30 30 round; /* Opera */ } 新的邊框?qū)傩?/span>

屬性	描述	CSS
border-image	設(shè)置所有 border-image-* 屬性的簡寫屬性。	3
border-radius	設(shè)置所有四個 border-*-radius 屬性的簡寫屬性。	3
box-shadow	向方框添加一個或多個陰影。	3

CSS3 背景 CSS3 背景 CSS3 包含多個新的背景屬性，它們提供了對背景更強(qiáng)大的控制。

• background-size
• background-origin

瀏覽器支持 CSS3 background-size 屬性 background-size 屬性規(guī)定背景圖片的尺寸。 在 CSS3 之前，背景圖片的尺寸是由圖片的實(shí)際尺寸決定的。在 CSS3 中，可以規(guī)定背景圖片的尺寸，這就允許我們在不同的環(huán)境中重復(fù)使用背景圖片。 您能夠以像素或百分比規(guī)定尺寸。如果以百分比規(guī)定尺寸，那么尺寸相對于父元素的寬度和高度。 例子 1 調(diào)整背景圖片的大小： div { background:url(bg_flower.gif); -moz-background-size:63px 100px; /* 老版本的 Firefox */ background-size:63px 100px; background-repeat:no-repeat; } 例子 2 對背景圖片進(jìn)行拉伸，使其完成填充內(nèi)容區(qū)域： div { background:url(bg_flower.gif); -moz-background-size:40% 100%; /* 老版本的 Firefox */ background-size:40% 100%; background-repeat:no-repeat; } CSS3 background-origin 屬性 background-origin 屬性規(guī)定背景圖片的定位區(qū)域。 背景圖片可以放置于 content-box、padding-box 或 border-box 區(qū)域。 實(shí)例 在 content-box 中定位背景圖片： div { background:url(bg_flower.gif); background-repeat:no-repeat; background-size:100% 100%; -webkit-background-origin:content-box; /* Safari */ background-origin:content-box; } CSS3 多重背景圖片 實(shí)例 為 body 元素設(shè)置兩幅背景圖片： body { background-image:url(bg_flower.gif),url(bg_flower_2.gif); } 新的背景屬性

屬性	描述	CSS
background-clip	規(guī)定背景的繪制區(qū)域。	3
background-origin	規(guī)定背景圖片的定位區(qū)域。	3
background-size	規(guī)定背景圖片的尺寸。	3

CSS3 文本效果 CSS3 文本效果 CSS3 包含多個新的文本特性。

• text-shadow
• word-wrap

瀏覽器支持 Internet Explorer 10、Firefox、Chrome、Safari 以及 Opera 支持 text-shadow 屬性。 所有主流瀏覽器都支持 word-wrap 屬性。 注釋：Internet Explorer 9 以及更早的版本，不支持 text-shadow 屬性。 在 CSS3 中，text-shadow 可向文本應(yīng)用陰影。 您能夠規(guī)定水平陰影、垂直陰影、模糊距離，以及陰影的顏色： 實(shí)例 向標(biāo)題添加陰影： h1 { text-shadow: 5px 5px 5px #FF0000; } CSS3 自動換行 單詞太長的話就可能無法超出某個區(qū)域： 在 CSS3 中，word-wrap 屬性允許您允許文本強(qiáng)制文本進(jìn)行換行 - 即使這意味著會對單詞進(jìn)行拆分： 實(shí)例 允許對長單詞進(jìn)行拆分，并換行到下一行： p {word-wrap:break-word;} 新的文本屬性

屬性	描述	CSS
hanging-punctuation	規(guī)定標(biāo)點(diǎn)字符是否位于線框之外。	3
punctuation-trim	規(guī)定是否對標(biāo)點(diǎn)字符進(jìn)行修剪。	3
text-align-last	設(shè)置如何對齊最后一行或緊挨著強(qiáng)制換行符之前的行。	3
text-emphasis	向元素的文本應(yīng)用重點(diǎn)標(biāo)記以及重點(diǎn)標(biāo)記的前景色。	3
text-justify	規(guī)定當(dāng) text-align 設(shè)置為 "justify" 時所使用的對齊方法。	3
text-outline	規(guī)定文本的輪廓。	3
text-overflow	規(guī)定當(dāng)文本溢出包含元素時發(fā)生的事情。	3
text-shadow	向文本添加陰影。	3
text-wrap	規(guī)定文本的換行規(guī)則。	3
word-break	規(guī)定非中日韓文本的換行規(guī)則。	3
word-wrap	允許對長的不可分割的單詞進(jìn)行分割并換行到下一行。	3

CSS3 字體 CSS3 @font-face 規(guī)則 在 CSS3 之前，web 設(shè)計(jì)師必須使用已在用戶計(jì)算機(jī)上安裝好的字體。 通過 CSS3，web 設(shè)計(jì)師可以使用他們喜歡的任意字體。 當(dāng)您您找到或購買到希望使用的字體時，可將該字體文件存放到 web 服務(wù)器上，它會在需要時被自動下載到用戶的計(jì)算機(jī)上。 您“自己的”的字體是在 CSS3 @font-face 規(guī)則中定義的。 瀏覽器支持 使用粗體字體 您必須為粗體文本添加另一個包含描述符的 @font-face： 實(shí)例 @font-face { font-family: myFirstFont; src: url('Sansation_Bold.ttf'), url('Sansation_Bold.eot'); /* IE9+ */ font-weight:bold; } CSS3 字體描述符 下面的表格列出了能夠在 @font-face 規(guī)則中定義的所有字體描述符：

描述符	值	描述
font-family	name	必需。規(guī)定字體的名稱。
src	URL	必需。定義字體文件的 URL。
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	可選。定義如何拉伸字體。默認(rèn)是 "normal"。
font-style	ormal italic oblique	可選。定義字體的樣式。默認(rèn)是 "normal"。
font-weight	normal bold 100 200 300 400 500 600 700 800 900	可選。定義字體的粗細(xì)。默認(rèn)是 "normal"。
unicode-range	unicode-range	可選。定義字體支持的 UNICODE 字符范圍。默認(rèn)是 "U+0-10FFFF"。

CSS3 2D 轉(zhuǎn)換 CSS3 轉(zhuǎn)換 通過 CSS3 轉(zhuǎn)換，我們能夠?qū)υ剡M(jìn)行移動、縮放、轉(zhuǎn)動、拉長或拉伸。 它如何工作？ 轉(zhuǎn)換是使元素改變形狀、尺寸和位置的一種效果。 您可以使用 2D 或 3D 轉(zhuǎn)換來轉(zhuǎn)換您的元素。 2D 轉(zhuǎn)換

• translate()
• rotate()
• scale()
• skew()
• matrix()

實(shí)例 1：旋轉(zhuǎn) div { transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ -o-transform: rotate(30deg); /* Opera */ -moz-transform: rotate(30deg); /* Firefox */ } translate() 方法 通過 translate() 方法，元素從其當(dāng)前位置移動，根據(jù)給定的 left（x 坐標(biāo)） 和 top（y 坐標(biāo)） 位置參數(shù)： 實(shí)例 div { transform: translate(50px,100px); -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari and Chrome */ -o-transform: translate(50px,100px); /* Opera */ -moz-transform: translate(50px,100px); /* Firefox */ } 值 translate(50px,100px) 把元素從左側(cè)移動 50 像素，從頂端移動 100 像素。 rotate() 方法 通過 rotate() 方法，元素順時針旋轉(zhuǎn)給定的角度。允許負(fù)值，元素將逆時針旋轉(zhuǎn)。 實(shí)例 div { transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ -o-transform: rotate(30deg); /* Opera */ -moz-transform: rotate(30deg); /* Firefox */ } 值 rotate(30deg) 把元素順時針旋轉(zhuǎn) 30 度。 scale() 方法 通過 scale() 方法，元素的尺寸會增加或減少，根據(jù)給定的寬度（X 軸）和高度（Y 軸）參數(shù)： 實(shí)例 div { transform: scale(2,4); -ms-transform: scale(2,4); /* IE 9 */ -webkit-transform: scale(2,4); /* Safari 和 Chrome */ -o-transform: scale(2,4); /* Opera */ -moz-transform: scale(2,4); /* Firefox */ } 值 scale(2,4) 把寬度轉(zhuǎn)換為原始尺寸的 2 倍，把高度轉(zhuǎn)換為原始高度的 4 倍。 matrix() 方法 matrix() 方法把所有 2D 轉(zhuǎn)換方法組合在一起。 matrix() 方法需要六個參數(shù)，包含數(shù)學(xué)函數(shù)，允許您：旋轉(zhuǎn)、縮放、移動以及傾斜元素。 實(shí)例 如何使用 matrix 方法將 div 元素旋轉(zhuǎn) 30 度： div { transform:matrix(0.866,0.5,-0.5,0.866,0,0); -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */ -moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */ -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */ -o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */ } 新的轉(zhuǎn)換屬性 下面的表格列出了所有的轉(zhuǎn)換屬性：

屬性	描述	CSS
transform	向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。	3
transform-origin	允許你改變被轉(zhuǎn)換元素的位置。	3

2D Transform 方法

函數(shù)	描述
matrix(n,n,n,n,n,n)	定義 2D 轉(zhuǎn)換，使用六個值的矩陣。
translate(x,y)	定義 2D 轉(zhuǎn)換，沿著 X 和 Y 軸移動元素。
translateX(n)	定義 2D 轉(zhuǎn)換，沿著 X 軸移動元素。
translateY(n)	定義 2D 轉(zhuǎn)換，沿著 Y 軸移動元素。
scale(x,y)	定義 2D 縮放轉(zhuǎn)換，改變元素的寬度和高度。
scaleX(n)	定義 2D 縮放轉(zhuǎn)換，改變元素的寬度。
scaleY(n)	定義 2D 縮放轉(zhuǎn)換，改變元素的高度。
rotate(angle)	定義 2D 旋轉(zhuǎn)，在參數(shù)中規(guī)定角度。
skew(x-angle,y-angle)	定義 2D 傾斜轉(zhuǎn)換，沿著 X 和 Y 軸。
skewX(angle)	定義 2D 傾斜轉(zhuǎn)換，沿著 X 軸。
skewY(angle)	定義 2D 傾斜轉(zhuǎn)換，沿著 Y 軸。

CSS3 3D 轉(zhuǎn)換 CSS3 允許您使用 3D 轉(zhuǎn)換來對元素進(jìn)行格式化。

• rotateX()
• rotateY()

瀏覽器支持 rotateX() 方法 通過 rotateX() 方法，元素圍繞其 X 軸以給定的度數(shù)進(jìn)行旋轉(zhuǎn)。 實(shí)例 div { transform: rotateX(120deg); -webkit-transform: rotateX(120deg); /* Safari 和 Chrome */ -moz-transform: rotateX(120deg); /* Firefox */ } rotateY() 旋轉(zhuǎn) 通過 rotateY() 方法，元素圍繞其 Y 軸以給定的度數(shù)進(jìn)行旋轉(zhuǎn)。 實(shí)例 div { transform: rotateY(130deg); -webkit-transform: rotateY(130deg); /* Safari 和 Chrome */ -moz-transform: rotateY(130deg); /* Firefox */ } 轉(zhuǎn)換屬性 下面的表格列出了所有的轉(zhuǎn)換屬性：

屬性	描述	CSS
transform	向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。	3
transform-origin	允許你改變被轉(zhuǎn)換元素的位置。	3
transform-style	規(guī)定被嵌套元素如何在 3D 空間中顯示。	3
perspective	規(guī)定 3D 元素的透視效果。	3
perspective-origin	規(guī)定 3D 元素的底部位置。	3
backface-visibility	定義元素在不面對屏幕時是否可見。	3

2D Transform 方法

函數(shù)	描述
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)	定義 3D 轉(zhuǎn)換，使用 16 個值的 4x4 矩陣。
translate3d(x,y,z)	定義 3D 轉(zhuǎn)化。
translateX(x)	定義 3D 轉(zhuǎn)化，僅使用用于 X 軸的值。
translateY(y)	定義 3D 轉(zhuǎn)化，僅使用用于 Y 軸的值。
translateZ(z)	定義 3D 轉(zhuǎn)化，僅使用用于 Z 軸的值。
scale3d(x,y,z)	定義 3D 縮放轉(zhuǎn)換。
scaleX(x)	定義 3D 縮放轉(zhuǎn)換，通過給定一個 X 軸的值。
scaleY(y)	定義 3D 縮放轉(zhuǎn)換，通過給定一個 Y 軸的值。
scaleZ(z)	定義 3D 縮放轉(zhuǎn)換，通過給定一個 Z 軸的值。
rotate3d(x,y,z,angle)	定義 3D 旋轉(zhuǎn)。
rotateX(angle)	定義沿 X 軸的 3D 旋轉(zhuǎn)。
rotateY(angle)	定義沿 Y 軸的 3D 旋轉(zhuǎn)。
rotateZ(angle)	定義沿 Z 軸的 3D 旋轉(zhuǎn)。
perspective(n)	定義 3D 轉(zhuǎn)換元素的透視視圖。

CSS3 過渡 CSS3 過渡 通過 CSS3，我們可以在不使用 Flash 動畫或 JavaScript 的情況下，當(dāng)元素從一種樣式變換為另一種樣式時為元素添加效果。 請把鼠標(biāo)移動到下面的元素上： 瀏覽器支持 Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 屬性。 Safari 需要前綴 -webkit-。 注釋：Internet Explorer 9 以及更早的版本，不支持 transition 屬性。 注釋：Chrome 25 以及更早的版本，需要前綴 -webkit-。 它如何工作？ CSS3 過渡是元素從一種樣式逐漸改變?yōu)榱硪环N的效果。 要實(shí)現(xiàn)這一點(diǎn)，必須規(guī)定兩項(xiàng)內(nèi)容：

• 規(guī)定您希望把效果添加到哪個 CSS 屬性上
• 規(guī)定效果的時長

實(shí)例 應(yīng)用于寬度屬性的過渡效果，時長為 2 秒： div { transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari 和 Chrome */ -o-transition: width 2s; /* Opera */ } 多項(xiàng)改變 如需向多個樣式添加過渡效果，請?zhí)砑佣鄠€屬性，由逗號隔開： 實(shí)例 向?qū)挾取⒏叨群娃D(zhuǎn)換添加過渡效果： div { transition: width 2s, height 2s, transform 2s; -moz-transition: width 2s, height 2s, -moz-transform 2s; -webkit-transition: width 2s, height 2s, -webkit-transform 2s; -o-transition: width 2s, height 2s,-o-transform 2s; } 過渡屬性 下面的表格列出了所有的轉(zhuǎn)換屬性：

屬性	描述	CSS
transition	簡寫屬性，用于在一個屬性中設(shè)置四個過渡屬性。	3
transition-property	規(guī)定應(yīng)用過渡的 CSS 屬性的名稱。	3
transition-duration	定義過渡效果花費(fèi)的時間。默認(rèn)是 0。	3
transition-timing-function	規(guī)定過渡效果的時間曲線。默認(rèn)是 "ease"。	3
transition-delay	規(guī)定過渡效果何時開始。默認(rèn)是 0。	?

CSS3 @keyframes 規(guī)則 如需在 CSS3 中創(chuàng)建動畫，您需要學(xué)習(xí) @keyframes 規(guī)則。 @keyframes 規(guī)則用于創(chuàng)建動畫。在 @keyframes 中規(guī)定某項(xiàng) CSS 樣式，就能創(chuàng)建由當(dāng)前樣式逐漸改為新樣式的動畫效果。 瀏覽器支持 CSS3 動畫 當(dāng)您在 @keyframes 中創(chuàng)建動畫時，請把它捆綁到某個選擇器，否則不會產(chǎn)生動畫效果。 通過規(guī)定至少以下兩項(xiàng) CSS3 動畫屬性，即可將動畫綁定到選擇器：

• 規(guī)定動畫的名稱
• 規(guī)定動畫的時長

實(shí)例 把 "myfirst" 動畫捆綁到 div 元素，時長：5 秒： div { animation: myfirst 5s; -moz-animation: myfirst 5s; /* Firefox */ -webkit-animation: myfirst 5s; /* Safari 和 Chrome */ -o-animation: myfirst 5s; /* Opera */ } 什么是 CSS3 中的動畫？ 動畫是使元素從一種樣式逐漸變化為另一種樣式的效果。 您可以改變?nèi)我舛嗟臉邮饺我舛嗟拇螖?shù)。 請用百分比來規(guī)定變化發(fā)生的時間，或用關(guān)鍵詞 "from" 和 "to"，等同于 0% 和 100%。 0% 是動畫的開始，100% 是動畫的完成。 為了得到最佳的瀏覽器支持，您應(yīng)該始終定義 0% 和 100% 選擇器。 實(shí)例 當(dāng)動畫為 25% 及 50% 時改變背景色，然后當(dāng)動畫 100% 完成時再次改變： <!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; background:red; position:relative; animation:myfirst 5s; -moz-animation:myfirst 5s; /* Firefox */ -webkit-animation:myfirst 5s; /* Safari and Chrome */ -o-animation:myfirst 5s; /* Opera */ } @keyframes myfirst { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } @-moz-keyframes myfirst /* Firefox */ { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } @-webkit-keyframes myfirst /* Safari and Chrome */ { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } @-o-keyframes myfirst /* Opera */ { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } </style> </head> <body> <p><b>注釋：</b>本例在 Internet Explorer 中無效。</p> <div></div> </body> </html> CSS3 多列 CSS3 多列 通過 CSS3，您能夠創(chuàng)建多個列來對文本進(jìn)行布局 - 就像報(bào)紙那樣！

• column-count
• column-gap
• column-rule

瀏覽器支持 Internet Explorer 10 和 Opera 支持多列屬性。 Firefox 需要前綴 -moz-。 Chrome 和 Safari 需要前綴 -webkit-。 注釋：Internet Explorer 9 以及更早的版本不支持多列屬性。 CSS3 創(chuàng)建多列 column-count 屬性規(guī)定元素應(yīng)該被分隔的列數(shù)： 實(shí)例 把 div 元素中的文本分隔為三列： div { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari 和 Chrome */ column-count:3; } <!DOCTYPE html> <html> <head> <style> .newspaper { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3; } </style> </head> <body> <p><b>注釋：</b>Internet Explorer 不支持 column-count 屬性。</p> <div class="newspaper"> 人民網(wǎng)北京2月24日電 (記者 劉陽)國家發(fā)展改革委近日發(fā)出通知，決定自2月25日零時起將汽、柴油價格每噸分別提高300元和290元，折算到90號汽油和0號柴油（全國平均）每升零售價格分別提高0.22元和0.25元。 此次國內(nèi)成品油價格調(diào)整幅度，是按照現(xiàn)行國內(nèi)成品油價格形成機(jī)制，根據(jù)國際市場油價變化情況確定的。去年11月16日國內(nèi)成品油價格調(diào)整以來，受市場預(yù)期歐美經(jīng)濟(jì)復(fù)蘇前景向好以及中東局勢持續(xù)動蕩等因素影響，國際市場原油價格先抑后揚(yáng)，2月上旬WTI和布倫特原油期貨價格再次回升至每桶95美元和115美元以上。雖然近兩日價格有所回落，但國內(nèi)油價掛鉤的國際市場三種原油連續(xù)22個工作日移動平均價格上漲幅度已超過4%，達(dá)到國內(nèi)成品油價格調(diào)整的邊界條件。 通知指出，這次成品油調(diào)價后，國家將按照已建立的補(bǔ)貼機(jī)制，繼續(xù)對種糧農(nóng)民、漁業(yè)（含遠(yuǎn)洋漁業(yè)）、林業(yè)、城市公交、農(nóng)村道路客運(yùn)（含島際和農(nóng)村水路客運(yùn)）等給予補(bǔ)貼。同時，為保證市場物價基本穩(wěn)定，防止連鎖漲價，對與居民生活密切相關(guān)的鐵路客運(yùn)、城市公交、農(nóng)村道路客運(yùn)（含島際和農(nóng)村水路客運(yùn)）價格不作調(diào)整。 通知要求，中石油、中石化、中海油三大公司要組織好成品油生產(chǎn)和調(diào)運(yùn)，保持合理庫存，加強(qiáng)綜合協(xié)調(diào)和應(yīng)急調(diào)度，保障成品油供應(yīng)。各級價格主管部門要加大市場監(jiān)督檢查力度，依法查處不執(zhí)行國家價格政策，以及囤積居奇、造謠惑眾、合謀漲價、搭車漲價等違法行為，維護(hù)正常市場秩序。 </div> </body> </html> CSS3 規(guī)定列之間的間隔 column-gap 屬性規(guī)定列之間的間隔： 實(shí)例 規(guī)定列之間 40 像素的間隔： div { -moz-column-gap:40px; /* Firefox */ -webkit-column-gap:40px; /* Safari 和 Chrome */ column-gap:40px; } 新的多列屬性 下面的表格列出了所有的轉(zhuǎn)換屬性：

屬性	描述	CSS
column-count	規(guī)定元素應(yīng)該被分隔的列數(shù)。	3
column-fill	規(guī)定如何填充列。	3
column-gap	規(guī)定列之間的間隔。	3
column-rule	設(shè)置所有 column-rule-* 屬性的簡寫屬性。	3
column-rule-color	規(guī)定列之間規(guī)則的顏色。	3
column-rule-style	規(guī)定列之間規(guī)則的樣式。	3
column-rule-width	規(guī)定列之間規(guī)則的寬度。	3
column-span	規(guī)定元素應(yīng)該橫跨的列數(shù)。	3
column-width	規(guī)定列的寬度。	3
columns	規(guī)定設(shè)置 column-width 和 column-count 的簡寫屬性。	3

CSS3 用戶界面 CSS3 用戶界面 在 CSS3 中，新的用戶界面特性包括重設(shè)元素尺寸、盒尺寸以及輪廓等。

• resize
• box-sizing
• outline-offset

瀏覽器支持 Firefox、Chrome 以及 Safari 支持 resize 屬性。 Internet Explorer、Chrome、Safari 以及 Opera 支持 box-sizing 屬性。Firefox 需要前綴 -moz-。 所有主流瀏覽器都支持 outline-offset 屬性，除了 Internet Explorer。 CSS3 Resizing 在 CSS3，resize 屬性規(guī)定是否可由用戶調(diào)整元素尺寸。 實(shí)例 規(guī)定 div 元素可由用戶調(diào)整大小： div { resize:both; overflow:auto; } CSS3 Box Sizing box-sizing 屬性允許您以確切的方式定義適應(yīng)某個區(qū)域的具體內(nèi)容。 實(shí)例 規(guī)定兩個并排的帶邊框方框： div { box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */ width:50%; float:left; } CSS3 Outline Offset outline-offset 屬性對輪廓進(jìn)行偏移，并在超出邊框邊緣的位置繪制輪廓。 輪廓與邊框有兩點(diǎn)不同：

• 輪廓不占用空間
• 輪廓可能是非矩形

新的用戶界面屬性 下面的表格列出了所有的轉(zhuǎn)換屬性：

屬性	描述	CSS
appearance	允許您將元素設(shè)置為標(biāo)準(zhǔn)用戶界面元素的外觀	3
box-sizing	允許您以確切的方式定義適應(yīng)某個區(qū)域的具體內(nèi)容。	3
icon	為創(chuàng)作者提供使用圖標(biāo)化等價物來設(shè)置元素樣式的能力。	3
nav-down	規(guī)定在使用 arrow-down 導(dǎo)航鍵時向何處導(dǎo)航。	3
nav-index	設(shè)置元素的 tab 鍵控制次序。	3
nav-left	規(guī)定在使用 arrow-left 導(dǎo)航鍵時向何處導(dǎo)航。	3
nav-right	規(guī)定在使用 arrow-right 導(dǎo)航鍵時向何處導(dǎo)航。	3
nav-up	規(guī)定在使用 arrow-up 導(dǎo)航鍵時向何處導(dǎo)航。	3
outline-offset	對輪廓進(jìn)行偏移，并在超出邊框邊緣的位置繪制輪廓。	3
resize	規(guī)定是否可由用戶對元素的尺寸進(jìn)行調(diào)整。	3

CSS3 選擇器 在 CSS 中，選擇器是一種模式，用于選擇需要添加樣式的元素。 "CSS" 列指示該屬性是在哪個 CSS 版本中定義的。（CSS1、CSS2 還是 CSS3。）

選擇器	例子	例子描述	CSS
.class	.intro	選擇 class="intro" 的所有元素。	1
#id	#firstname	選擇 id="firstname" 的所有元素。	1
*	*	選擇所有元素。	2
element	p	選擇所有 <p> 元素。	1
element,element	div,p	選擇所有 <div> 元素和所有 <p> 元素。	1
element element	div p	選擇 <div> 元素內(nèi)部的所有 <p> 元素。	1
element>element	div>p	選擇父元素為 <div> 元素的所有 <p> 元素。	2
element+element	div+p	選擇緊接在 <div> 元素之后的所有 <p> 元素。	2
[attribute]	[target]	選擇帶有 target 屬性所有元素。	2
[attribute=value]	[target=_blank]	選擇 target="_blank" 的所有元素。	2
[attribute~=value]	[title~=flower]	選擇 title 屬性包含單詞 "flower" 的所有元素。	2
[attribute|=value]	[lang|=en]	選擇 lang 屬性值以 "en" 開頭的所有元素。	2
:link	a:link	選擇所有未被訪問的鏈接。	1
:visited	a:visited	選擇所有已被訪問的鏈接。	1
:active	a:active	選擇活動鏈接。	1
:hover	a:hover	選擇鼠標(biāo)指針位于其上的鏈接。	1
:focus	input:focus	選擇獲得焦點(diǎn)的 input 元素。	2
:first-letter	p:first-letter	選擇每個 <p> 元素的首字母。	1
:first-line	p:first-line	選擇每個 <p> 元素的首行。	1
:first-child	p:first-child	選擇屬于父元素的第一個子元素的每個 <p> 元素。	2
:before	p:before	在每個 <p> 元素的內(nèi)容之前插入內(nèi)容。	2
:after	p:after	在每個 <p> 元素的內(nèi)容之后插入內(nèi)容。	2
:lang(language)	p:lang(it)	選擇帶有以 "it" 開頭的 lang 屬性值的每個 <p> 元素。	2
element1~element2	p~ul	選擇前面有 <p> 元素的每個 <ul> 元素。	3
[attribute^=value]	a[src^="https"]	選擇其 src 屬性值以 "https" 開頭的每個 <a> 元素。	3
[attribute$=value]	a[src$=".pdf"]	選擇其 src 屬性以 ".pdf" 結(jié)尾的所有 <a> 元素。	3
[attribute*=value]	a[src*="abc"]	選擇其 src 屬性中包含 "abc" 子串的每個 <a> 元素。	3
:first-of-type	p:first-of-type	選擇屬于其父元素的首個 <p> 元素的每個 <p> 元素。	3
:last-of-type	p:last-of-type	選擇屬于其父元素的最后 <p> 元素的每個 <p> 元素。	3
:only-of-type	p:only-of-type	選擇屬于其父元素唯一的 <p> 元素的每個 <p> 元素。	3
:only-child	p:only-child	選擇屬于其父元素的唯一子元素的每個 <p> 元素。	3
:nth-child(n)	p:nth-child(2)	選擇屬于其父元素的第二個子元素的每個 <p> 元素。	3
:nth-last-child(n)	p:nth-last-child(2)	同上，從最后一個子元素開始計(jì)數(shù)。	3
:nth-of-type(n)	p:nth-of-type(2)	選擇屬于其父元素第二個 <p> 元素的每個 <p> 元素。	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是從最后一個子元素開始計(jì)數(shù)。	3
:last-child	p:last-child	選擇屬于其父元素最后一個子元素每個 <p> 元素。	3
:root	:root	選擇文檔的根元素。	3
:empty	p:empty	選擇沒有子元素的每個 <p> 元素（包括文本節(jié)點(diǎn)）。	3
:target	#news:target	選擇當(dāng)前活動的 #news 元素。	3
:enabled	input:enabled	選擇每個啟用的 <input> 元素。	3
:disabled	input:disabled	選擇每個禁用的 <input> 元素	3
:checked	input:checked	選擇每個被選中的 <input> 元素。	3
:not(selector)	:not(p)	選擇非 <p> 元素的每個元素。	3
::selection	::selection	選擇被用戶選取的元素部分。	3

轉(zhuǎn)載于:https://www.cnblogs.com/lihaolh/p/6773172.html

總結(jié)

以上是生活随笔為你收集整理的css3常用方法以及css3选择器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。