CSS3有哪些新特性

CSS3的新特性大致分為以下六類

選擇器

邊框與圓角

背景與漸變

過渡

變換

動(dòng)畫

下面分別說一說以上六類都有哪些內(nèi)容

CSS3選擇器

1.基本選擇器

基本選擇器又分為

子選擇器

相鄰兄弟選擇器

通用兄弟選擇器

群組選擇器

2.屬性選擇器

1.element[attribute]

為帶有attribute屬性的元素設(shè)置樣式

2.element[attribute='value']

為attribute='value'屬性的元素設(shè)置樣式

3.element[attribute~='value']

選擇attribute屬性值包含 單詞value的元素 并設(shè)置樣式

4.element[attribute*='value']

選擇attribute屬性值包含value的元素設(shè)置樣式

5.element[attribute^='value']

選擇attribute屬性值是以value開頭的元素

6.element[attribute$='value']

選擇attribute屬性值是以value結(jié)尾的元素

注意比較3和4的區(qū)別

3.偽類選擇器

定義：這些偽類并不存在于HTML中，只有當(dāng)用戶和網(wǎng)站交互的時(shí)候才能體現(xiàn)出來(lái)。

1.錨點(diǎn)偽類

:link

:visited

2.用戶行為偽類

:hover

:active

:focus

3.目標(biāo)偽類

:target

當(dāng)我們點(diǎn)擊錨點(diǎn)鏈接時(shí)，對(duì)應(yīng)id的元素會(huì)顯示在視口

狀態(tài)偽類

這里我們需要知道checkbox只能設(shè)置寬高，不能設(shè)置背景和邊框，如果想要設(shè)置那么我們需要用appearance:none;來(lái)清除input的默認(rèn)樣式

：first-child/last-child

語(yǔ)法 element:first-child

選擇屬于父元素的首個(gè)/最后一個(gè)子元素的每個(gè)element元素，注意element為子元素。

：nth-child(n)

選擇某元素下的第n個(gè)element元素（n是一個(gè)簡(jiǎn)單的表達(dá)式，不能用其他的字母代替），括號(hào)里還可以傳odd和even兩個(gè)關(guān)鍵字

：nth-last-child(n)

匹配屬于某元素下的第n個(gè)element子元素，從最后一個(gè)子元素開始計(jì)數(shù)

：nth-of-type(n)

語(yǔ)法 element:nth-of-type(n)

匹配屬于父元素的特定類型的第n個(gè)子元素,element為指定類型的子元素

:nth-last-of-type

匹配屬于父元素的特定類型的第n個(gè)子元素，從最后一個(gè)計(jì)數(shù)

:first-of-type/:last-of-type

匹配屬于其父元素的特定類型的首個(gè)/最后一個(gè)子元素的每個(gè)元素

：only-child

匹配屬于父元素的唯一子元素的每個(gè)元素

：only-of-type

匹配屬于其父元素特定類型的唯一子元素的每個(gè)元素

：empty

匹配沒有子元素（包括文本節(jié)點(diǎn)）的每個(gè)元素

定義：匹配非 元素或者選擇器 的每個(gè)元素

語(yǔ)法：父元素：not(子元素或者選擇器)

例：ul:not(span){}

element::first-line

定義：對(duì)元素的一行文本進(jìn)行設(shè)置，只能用于塊級(jí)元素

element::first-letter

定義：用于向文本的首字母設(shè)置特殊樣式，只能用于塊級(jí)元素

element::before

定義：在元素的內(nèi)容前面插入新內(nèi)容，常與content配合使用

element::after

定義：在元素的內(nèi)容后面插入新內(nèi)容，常與content配合使用

element::selection

定義：用于設(shè)置瀏覽器中選中文本后的背景色與前景色

偽元素與元素的區(qū)別:

無(wú)法通過JS獲取其DOM

無(wú)法通過瀏覽器開發(fā)者工具直接查看

偽元素默認(rèn)是 inline

使用偽元素注意事項(xiàng)：

1.使用偽元素before,after必須設(shè)置content

2.使用偽元素before,after顯示背景圖，一定要使用display設(shè)置為塊元素

3.使用偽元素before,after設(shè)置為display:inline-block,需要再次設(shè)置vertical-align:middle

CSS3邊框與圓角

圓角border-radius

定義：可以為元素添加圓角邊框（塊元素，行內(nèi)塊元素，行內(nèi)元素）

屬性：

border-top-left-radius 左上角

border-top-right-radius 右上角

border-bottom-right-radius 右下角

border-bottom-left-radius 左下角

復(fù)合屬性：border-radius：

屬性值

四個(gè)值：左上角 右上角 右下角 左下角

三個(gè)值：左上角 右上角和左下角 右下角

兩個(gè)值：左上角和右下角 右上角和左下角

一個(gè)值：4個(gè)角都生效

border-radius中的屬性值由兩個(gè)參數(shù)值構(gòu)成: value1 / value2，值之間用/分隔，value1代表圓角的水平半徑，value2代表圓角的垂直半徑。

圓形與橢圓：

一旦使用百分比，參照的是元素本身的高度與寬度

當(dāng)拿50%時(shí)，寬等于高為圓形 寬不等于高為橢圓形

2.盒陰影box-shadow

定義：可以控制一個(gè)或多個(gè)下拉陰影的框

語(yǔ)法：box-shadow: 水平方向的偏移量 垂直方向的偏移量 模糊程度 擴(kuò)展程度 顏色 是否具有內(nèi)陰影

屬性值的介紹：

偏移量：

把元素左上角（0，0）作為基準(zhǔn)點(diǎn)，找水

平方向和垂直方向的偏移量

水平： 正值 --- 右 ，負(fù)值 --- 左

垂直： 正值 --- 下 ，負(fù)值 --- 上

模糊程度：

邊界模糊，但是邊界線未動(dòng)

由邊界線向外模糊多少像素

擴(kuò)展程度：

盒子陰影，上下左右都向外擴(kuò)展多少像素

是否具有內(nèi)陰影：

inset(默認(rèn)沒有，也就是默認(rèn)是外陰影)

加上inset,盒子的陰影為內(nèi)陰影

擴(kuò)展程度可為負(fù)值，但是模糊程度不可以

CSS3背景與漸變

背景

background-image

語(yǔ)法：

backgroundimage:url('),url('')

使用逗號(hào)把圖片分開

注意：元素引入多個(gè)背景圖片，前面圖片會(huì)覆蓋后面的圖片

background-cilp

定義：指定背景的繪制區(qū)域（裁剪）

語(yǔ)法：

background-cilp：border-box / padding-box / content-box

屬性介紹：

border-box：背景被裁剪到邊框盒（從邊框開始繪制背景圖片）---默認(rèn)

padding-box：背景被裁剪到內(nèi)邊距框（從內(nèi)邊距開始繪制背景圖片）

content-box：背景被裁剪到內(nèi)容框

background-origin

定義：設(shè)置背景圖像的原始起始位置

語(yǔ)法：

background-origin：border-box / padding-box / content-box(背景圖片坐標(biāo)原點(diǎn)與這三個(gè)有關(guān)系)

屬性的介紹：

border-box：相對(duì)于邊框來(lái)定位

padding-box：相對(duì)于內(nèi)邊距來(lái)定位

content-box：相對(duì)于內(nèi)容框來(lái)定位

另外有一個(gè)需要了解

background-position:定義背景圖片的位置，水平與垂直方向上面的偏移量(參考點(diǎn))

background-repeat

定義：設(shè)置是否及如何重復(fù)背景圖像，默認(rèn)地，背景圖像在水平和垂直方向上重復(fù)。

屬性值：

repeat 默認(rèn)。背景圖像將在垂直方向和水平方向重復(fù)。

repeat-x 背景圖像將在水平方向重復(fù)。

repeat-y 背景圖像將在垂直方向重復(fù)。

no-repeat 背景圖像將僅顯示一次。

inherit 規(guī)定應(yīng)該從父元素繼承 background-repeat 屬性的設(shè)置

background-size

定義：指定背景圖像的大小

語(yǔ)法：

background-size：number / % / cover / contain

屬性介紹：

number: 寬度 高度（如果只寫一個(gè)數(shù)值，第二個(gè)數(shù)值默認(rèn)auto）

百分比： 0% - 99.99% 之間的任何值，此時(shí)的百分比參照于元素div的大小

cover：將背景圖片等比縮放以填滿整個(gè)容器（最遠(yuǎn)邊），如果高度達(dá)到一定比例99.99%，寬度多出的會(huì)溢出，但是，具體那部分溢出取決于定位

contain：將背景圖片等比縮放至某一邊緊貼容器邊緣為止（最近邊），如果圖片高度比較小，高度就會(huì)有空白區(qū)域出現(xiàn)

復(fù)合屬性background

定義：可以在一個(gè)聲明中設(shè)置所有的背景屬性

語(yǔ)法：

background：color position size repeat origin clip attachment image; background: #abc center 50% no-repeat content-box content-box fixed url('') ,url('')...

漸變

定義：可以在兩個(gè)或者多個(gè)指定顏色之間顯示平移的過渡

線性漸變

定義：是沿著一根軸線改變顏色，從起點(diǎn)到終點(diǎn)進(jìn)行順序漸變（從一邊拉向另一邊）

語(yǔ)法：background:linear-gradient(方向，開始顏色，結(jié)束顏色)

1.方向從上到下（默認(rèn)）

background: linear-gradient(red,blue);

2.方向從左到右

background: linear-gradient(to right,red,blue);

3.對(duì)角

background: linear-gradient(to right bottom,red,blue);

4.角度(單位deg)

background: linear-gradient(角度,red,blue);

角度說明：0deg 將創(chuàng)建一個(gè)從下到上的漸變，90deg將創(chuàng)建一個(gè)從左到右的漸變

background: linear-gradient(red 10%,blue 20%,green 30%,yellow 40%);

從0%到10%，為紅色，從10%到20%為紅色到藍(lán)色的漸變，從20%到30%為藍(lán)色到綠色的漸變，從30%到40%，為綠色到黃色的漸變,從40%到99.99%為黃色

background: linear-gradient(red 10%,blue);

從0%到10%，為紅色，從10%到99.99%為紅色到藍(lán)色的漸變

最后如果不寫具體數(shù)值，默認(rèn)到99.99%

background: linear-gradient(red,blue 30%);

從0%到30%，為紅色到藍(lán)色的漸變

如果一個(gè)不寫，默認(rèn)數(shù)值是 0%

background:lineargradient(rgba(255,0,0,0),rgba(255,0,0,1));

由透明色變?yōu)椴煌该魃?/p>

示例：background: repeating-linear-gradient(90deg,red 0%,blue 20%);或者 background: repeating-linear-gradient(90deg,red 0%,blue 10%,red 20%);

注意：把元素的整體寬度看成99.99%

徑向漸變

定義：從起點(diǎn)到終點(diǎn)，顏色從內(nèi)向外進(jìn)行圓形漸變

語(yǔ)法：background:radial-gradient(形狀尺寸，開始顏色，結(jié)束顏色)

形狀分類：

circle --- 圓形

ellipse --- 橢圓形

注意：當(dāng)元素的高和寬一樣時(shí)，參數(shù)無(wú)論設(shè)置哪個(gè)，都是圓形

尺寸大?。?/p>

closest-side最近邊

background: radial-gradient(closest-side circle,red , blue);

farthest-side 最遠(yuǎn)邊

background: radial-gradient(farthest-side circle,red , blue);

closest-corner最近角

background: radial-gradient(closest-corner circle,red , blue);

farthest-corner最遠(yuǎn)角

background: radial-gradient(farthest-corner circle,red , blue);

顏色結(jié)點(diǎn)：

例：

background:radial-gradient(circle,red 50% ,blue 70%);

注意：此時(shí)的百分比,指的是圓心到元素最遠(yuǎn)端的距離（角度）

重復(fù)漸變 ：

示例： background: repeating-radial-gradient(red 0%,blue 20%);

background: repeating-radial-gradient(red 0%,blue 10%,red 20%);

CSS3過渡

定義：允許css的屬性值在一定時(shí)間區(qū)間內(nèi)平滑的過渡，在鼠標(biāo)點(diǎn)擊，鼠標(biāo)滑過或?qū)υ厝魏胃淖冎杏|發(fā)，并圓滑地以動(dòng)畫形式改變css的屬性值。

屬性：

屬性

定義：設(shè)置對(duì)象中的參與過渡的屬性

語(yǔ)法：transition-property：none | all | property

參數(shù)說明：

none： 沒有屬性改變

all : 默認(rèn)值，所有屬性都改變

property： 元素的屬性名 width,color等

屬性

定義: 設(shè)置對(duì)象過渡的持續(xù)時(shí)間

語(yǔ)法：transition-duration：time

參數(shù)說明：

規(guī)定完成過渡效果需要花費(fèi)的時(shí)間，以秒或者毫秒計(jì)，默認(rèn)值0

3.transition-timing-function屬性

定義：設(shè)置對(duì)象中過渡的動(dòng)畫類型

語(yǔ)法：只能使用一個(gè)屬性值

參數(shù)說明：

ease:平滑過渡（0--慢--快--慢），默認(rèn)值

cubic-bezier()

linear:線性過渡（勻速） cubic-bezier(0,0,1,1)

ease-in:慢--快 cubic-bezier()

ease-out:快--慢 cubic-bezier(0,0,)

ease-in-out:慢--快--慢

cubic-bezier(0.42,0,)

貝塞爾曲線 :http://cubic-bezier.com/#.17,...

4.transition-delay屬性

定義：設(shè)置對(duì)象延遲的過渡時(shí)間

語(yǔ)法：transition-delay：time

參數(shù)說明：

指定秒或者毫秒數(shù)來(lái)延遲動(dòng)畫效果的開始，默認(rèn)是0

5.transition復(fù)合屬性

語(yǔ)法：

transition ： property duration timing-function delay；

參數(shù)說明：過渡時(shí)間和延遲時(shí)間的順序不能亂

CSS3變換

定義：讓一個(gè)元素在一個(gè)坐標(biāo)系統(tǒng)中變形，這個(gè)屬性包含一系列的變形函數(shù)，可以移動(dòng)，旋轉(zhuǎn)，縮放元素。

語(yǔ)法：transform：none | <transform-function> 默認(rèn)值是none

2d變換

1.rotate()旋轉(zhuǎn)

定義：通過指定一個(gè)角度參數(shù)，對(duì)元素指定一個(gè)2D的旋轉(zhuǎn)

語(yǔ)法：transform：rotate(angle) 單位deg

參數(shù)說明：angle指旋轉(zhuǎn)角度，正數(shù)表示順時(shí)針旋轉(zhuǎn)，負(fù)數(shù)表示逆時(shí)針旋轉(zhuǎn)

2.translate()平移

定義：根據(jù)X軸和Y軸的位置給定參數(shù)，使當(dāng)前元素位置移動(dòng)

分類：

translateX() 僅水平方向移動(dòng)

語(yǔ)法：transform：translateX() 單位px

translateY() 僅垂直方向移動(dòng)

語(yǔ)法：transform：translateY() 單位px

translate(x,y) 水平方向和垂直方向同時(shí)移動(dòng)

語(yǔ)法：transform：translate( X, Y) 單位px

注意：如果只寫一個(gè)參數(shù)，第二個(gè)默認(rèn)是0，也就是只設(shè)置了水平方向上的位移

3.scale( )縮放

定義：設(shè)置元素的縮放程度

分類：

scaleX( ) 僅水平方向縮放

語(yǔ)法：transform：scaleX() 沒有單位

scaleY( ) 僅垂直方向縮放

子主題 語(yǔ)法：transform：scaleY() 沒有單位

scale(x,y) 使元素水平和垂直方向同時(shí)縮放

語(yǔ)法：transform：scale(x,y) 沒有單位

4.skew()扭曲/傾斜

定義：設(shè)置元素的傾斜狀態(tài)

分類：

skewX( ) 僅使元素在水平方向上扭曲變形 單位deg 正值 ----逆時(shí)針

skewY( ) 僅使元素在垂直方向上扭曲變形 單位deg 正值 ----順時(shí)針

skew( ) 使元素在水平方向和垂直方向上扭曲變形 單位deg

注意：0deg與180deg 效果一樣

5.變換基點(diǎn)

定義：元素變換的基準(zhǔn)點(diǎn)

語(yǔ)法： transform-origin：水平方向 垂直方向

參數(shù)說明：

left top 左上角 ----四個(gè)角均可以

25% top

50px 50px

默認(rèn)值：

rotate 幾何中心點(diǎn)

skew 幾何中心點(diǎn)

scale 幾何中心點(diǎn)

translate 本身位置

3d變換

1.開啟3d空間transform-style: preserve-3d; 一般給父元素開啟

2.子元素設(shè)置3d變換效果

rotate

rotateX()

定義：指對(duì)象在X軸上的旋轉(zhuǎn)角度（變換基點(diǎn)： 50% 50% 0）

rotateY()

定義：指對(duì)象在Y軸上的旋轉(zhuǎn)角度（變換基點(diǎn)： 50% 50% 0）

rotateZ()

定義：指對(duì)象在Z軸上的旋轉(zhuǎn)角度（變換基點(diǎn)： 50% 50% 0）

translate

translateZ()

定義：指對(duì)象在Z軸上面的平移（變換基點(diǎn)： 50% 50% 0）

scale

scaleZ()

定義：指定對(duì)象的Z軸縮放（變換基點(diǎn)： 50% 50% 0）(無(wú)太大意義，開啟3d空間)

3.設(shè)置景深：實(shí)現(xiàn)近大遠(yuǎn)小

父元素子元素都可以設(shè)置

父元素：perspective: 300px;

子元素:

transform:perspective(300px) translateZ(-200px);

注意：景深：可選值：大于或等于0,景深值越大，元素看起來(lái)越大

默認(rèn)值: 0 -- 沒有景深 （不能為負(fù)值）

4.變換基點(diǎn)

默認(rèn)值： 50% 50% 0

transform-origin: top; 關(guān)鍵字表示 ( 50% 0 0 )

注意：立體3d盒子 Z：只能使用具體的長(zhǎng)度，不能使用百分比和關(guān)鍵字

5.景深中心點(diǎn)：改變觀察者視角

perspective-origin: top;

perspective-origin: top right;

6.元素背面可見還是不可見

backface-visibility:visible ;（默認(rèn)值：可見）

backface-visibility: hidden; 不可見

CSS3動(dòng)畫

定義：使元素從一種樣式逐漸變化到另外一種樣式的效果

@keyframes

定義：keyframes關(guān)鍵幀，用來(lái)決定動(dòng)畫變化的關(guān)鍵位置

注意：keyframes 控制關(guān)鍵位置，并不是所有的位置

語(yǔ)法：@keyframes animationname{

keyframes-selector{

cssStyles;

}

}

animationname：必寫項(xiàng)，定義動(dòng)畫的名稱

keyframes-selector：必寫項(xiàng)，動(dòng)畫持續(xù)時(shí)間的百分比 0% - 99.99%之間， 或者使用form和to關(guān)鍵字也可以設(shè)置，form代表0%，to代表99.99%

示例：

@keyframes abc {

from{transform: rotate(0)}

50%{transform:rotate(90deg)}

to{transform: rotate(360deg)}

}

animation屬性

屬性

設(shè)置對(duì)象所應(yīng)用的動(dòng)畫名稱

語(yǔ)法：

animation-name：keyframename | none

參數(shù)說明：

keyframename：指定要綁定到選擇器的關(guān)鍵幀的動(dòng)畫名稱

屬性

定義：設(shè)置對(duì)象動(dòng)畫的持續(xù)時(shí)間

語(yǔ)法：animation-duration：time

參數(shù)說明：指定對(duì)象播放完成需要花費(fèi)的時(shí)間，默認(rèn)值是0

3.animation-timing-function屬性

定義：設(shè)置對(duì)象動(dòng)畫的過渡類型

參數(shù)說明：與transition-timing-function屬性的參數(shù)一樣

屬性

定義：設(shè)置動(dòng)畫的延遲時(shí)間

語(yǔ)法：animation-delay：time

參數(shù)說明：可選值，定義動(dòng)畫開始前等待的時(shí)間，以秒或者毫秒數(shù)計(jì)數(shù)，默認(rèn)值是0

5.animation-iteration-count屬性

定義：設(shè)置對(duì)象動(dòng)畫的循環(huán)次數(shù)

語(yǔ)法：animation-iteration-count ： infinite | number

參數(shù)說明：

number為數(shù)字，其默認(rèn)值是1

infinite：無(wú)限循環(huán)次數(shù)

屬性

定義：設(shè)置對(duì)象動(dòng)畫是否反向運(yùn)動(dòng)

語(yǔ)法：

animation-direction：normal , reverse , alternate , alternate-reverse

參數(shù)說明：

normal : 正常方向

reverse :反向運(yùn)動(dòng)

alternate ： 先正常運(yùn)動(dòng)在反向運(yùn)動(dòng)，并持續(xù)交替運(yùn)行， 需要配合循環(huán)屬性使用

alternate-reverse ： 先反向運(yùn)動(dòng)在正常運(yùn)動(dòng)，并持續(xù)交替運(yùn)行， 需要配合循環(huán)屬性使用

屬性

定義：指定對(duì)象是否正在運(yùn)行或已暫停

語(yǔ)法：animation-play-state：paused | running

參數(shù)說明：

paused ： 指定暫停動(dòng)畫

running : 默認(rèn)值，制定正在運(yùn)行的動(dòng)畫

示例：鼠標(biāo)移動(dòng)到box上暫停動(dòng)畫

#box:hover{

animation-play-state: paused;

}

設(shè)置動(dòng)畫結(jié)束后的狀態(tài)

none：默認(rèn)值。不設(shè)置對(duì)象動(dòng)畫之外的狀態(tài)，DOM未進(jìn)行動(dòng)畫前狀態(tài)

forwards：設(shè)置對(duì)象狀態(tài)為動(dòng)畫結(jié)束時(shí)的狀態(tài)，99.99%或to時(shí)，當(dāng)設(shè)置animation-direcdtion為reverse時(shí)動(dòng)畫結(jié)束后顯示為keyframes一幀

backwards：設(shè)置對(duì)象狀態(tài)為動(dòng)畫開始時(shí)的狀態(tài),（測(cè)試顯示DOM未進(jìn)行動(dòng)畫前狀態(tài)）

both：設(shè)置對(duì)象狀態(tài)為動(dòng)畫結(jié)束或開始的狀態(tài)，結(jié)束時(shí)狀態(tài)優(yōu)先

復(fù)合屬性（不推薦使用 ）

語(yǔ)法：

animation ： name duration timing-function delay interation-count direction play-state

注意：在css3里面，給元素設(shè)置圓角、陰影、變換等屬性時(shí)，盡管外形位置發(fā)生改變，但是元素本身大小和位置不變

網(wǎng)頁(yè)標(biāo)題：CSS3有哪些新特性
標(biāo)題來(lái)源：http://www.bm7419.com/news13/191413.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)公司、網(wǎng)站排名、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)