2022-08-19 分類: 網(wǎng)站建設(shè)
CSS3的新特性大致分為以下六類
選擇器
邊框與圓角
背景與漸變
過(guò)渡
變換
動(dòng)畫(huà)
下面分別說(shuō)一說(shuō)以上六類都有哪些內(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開(kāi)頭的元素
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è)子元素開(kāi)始計(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
匹配沒(méi)有子元素(包括文本節(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ú)法通過(guò)JS獲取其DOM
無(wú)法通過(guò)瀏覽器開(kāi)發(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)沒(méi)有,也就是默認(rèn)是外陰影)
加上inset,盒子的陰影為內(nèi)陰影
擴(kuò)展程度可為負(fù)值,但是模糊程度不可以
CSS3背景與漸變
背景
background-image
語(yǔ)法:
backgroundimage:url('),url('')
使用逗號(hào)把圖片分開(kāi)
注意:元素引入多個(gè)背景圖片,前面圖片會(huì)覆蓋后面的圖片
background-cilp
定義:指定背景的繪制區(qū)域(裁剪)
語(yǔ)法:
background-cilp:border-box / padding-box / content-box
屬性介紹:
border-box:背景被裁剪到邊框盒(從邊框開(kāi)始繪制背景圖片)---默認(rèn)
padding-box:背景被裁剪到內(nèi)邊距框(從內(nèi)邊距開(kā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: 寬度 高度(如果只寫(xiě)一個(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è)指定顏色之間顯示平移的過(guò)渡
線性漸變
定義:是沿著一根軸線改變顏色,從起點(diǎn)到終點(diǎn)進(jìn)行順序漸變(從一邊拉向另一邊)
語(yǔ)法:background:linear-gradient(方向,開(kāi)始顏色,結(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);
角度說(shuō)明: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)色的漸變
最后如果不寫(xiě)具體數(shù)值,默認(rèn)到99.99%
background: linear-gradient(red,blue 30%);
從0%到30%,為紅色到藍(lán)色的漸變
如果一個(gè)不寫(xiě),默認(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(形狀尺寸,開(kāi)始顏色,結(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過(guò)渡
定義:允許css的屬性值在一定時(shí)間區(qū)間內(nèi)平滑的過(guò)渡,在鼠標(biāo)點(diǎn)擊,鼠標(biāo)滑過(guò)或?qū)υ厝魏胃淖冎杏|發(fā),并圓滑地以動(dòng)畫(huà)形式改變css的屬性值。
屬性:
屬性
定義:設(shè)置對(duì)象中的參與過(guò)渡的屬性
語(yǔ)法:transition-property:none | all | property
參數(shù)說(shuō)明:
none: 沒(méi)有屬性改變
all : 默認(rèn)值,所有屬性都改變
property: 元素的屬性名 width,color等
屬性
定義: 設(shè)置對(duì)象過(guò)渡的持續(xù)時(shí)間
語(yǔ)法:transition-duration:time
參數(shù)說(shuō)明:
規(guī)定完成過(guò)渡效果需要花費(fèi)的時(shí)間,以秒或者毫秒計(jì),默認(rèn)值0
3.transition-timing-function屬性
定義:設(shè)置對(duì)象中過(guò)渡的動(dòng)畫(huà)類型
語(yǔ)法:只能使用一個(gè)屬性值
參數(shù)說(shuō)明:
ease:平滑過(guò)渡(0--慢--快--慢),默認(rèn)值
cubic-bezier()
linear:線性過(guò)渡(勻速) 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ì)象延遲的過(guò)渡時(shí)間
語(yǔ)法:transition-delay:time
參數(shù)說(shuō)明:
指定秒或者毫秒數(shù)來(lái)延遲動(dòng)畫(huà)效果的開(kāi)始,默認(rèn)是0
5.transition復(fù)合屬性
語(yǔ)法:
transition : property duration timing-function delay;
參數(shù)說(shuō)明:過(guò)渡時(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)
定義:通過(guò)指定一個(gè)角度參數(shù),對(duì)元素指定一個(gè)2D的旋轉(zhuǎn)
語(yǔ)法:transform:rotate(angle) 單位deg
參數(shù)說(shuō)明: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
注意:如果只寫(xiě)一個(gè)參數(shù),第二個(gè)默認(rèn)是0,也就是只設(shè)置了水平方向上的位移
3.scale( )縮放
定義:設(shè)置元素的縮放程度
分類:
scaleX( ) 僅水平方向縮放
語(yǔ)法:transform:scaleX() 沒(méi)有單位
scaleY( ) 僅垂直方向縮放
子主題 語(yǔ)法:transform:scaleY() 沒(méi)有單位
scale(x,y) 使元素水平和垂直方向同時(shí)縮放
語(yǔ)法:transform:scale(x,y) 沒(méi)有單位
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ù)說(shuō)明:
left top 左上角 ----四個(gè)角均可以
25% top
50px 50px
默認(rèn)值:
rotate 幾何中心點(diǎn)
skew 幾何中心點(diǎn)
scale 幾何中心點(diǎn)
translate 本身位置
3d變換
1.開(kāi)啟3d空間transform-style: preserve-3d; 一般給父元素開(kāi)啟
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ú)太大意義,開(kāi)啟3d空間)
3.設(shè)置景深:實(shí)現(xiàn)近大遠(yuǎn)小
父元素子元素都可以設(shè)置
父元素:perspective: 300px;
子元素:
transform:perspective(300px) translateZ(-200px);
注意:景深:可選值:大于或等于0,景深值越大,元素看起來(lái)越大
默認(rèn)值: 0 -- 沒(méi)有景深 (不能為負(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.元素背面可見(jiàn)還是不可見(jiàn)
backface-visibility:visible ;(默認(rèn)值:可見(jiàn))
backface-visibility: hidden; 不可見(jiàn)
CSS3動(dòng)畫(huà)
定義:使元素從一種樣式逐漸變化到另外一種樣式的效果
@keyframes
定義:keyframes關(guān)鍵幀,用來(lái)決定動(dòng)畫(huà)變化的關(guān)鍵位置
注意:keyframes 控制關(guān)鍵位置,并不是所有的位置
語(yǔ)法:@keyframes animationname{
keyframes-selector{
cssStyles;
}
}
animationname:必寫(xiě)項(xiàng),定義動(dòng)畫(huà)的名稱
keyframes-selector:必寫(xiě)項(xiàng),動(dòng)畫(huà)持續(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)畫(huà)名稱
語(yǔ)法:
animation-name:keyframename | none
參數(shù)說(shuō)明:
keyframename:指定要綁定到選擇器的關(guān)鍵幀的動(dòng)畫(huà)名稱
屬性
定義:設(shè)置對(duì)象動(dòng)畫(huà)的持續(xù)時(shí)間
語(yǔ)法:animation-duration:time
參數(shù)說(shuō)明:指定對(duì)象播放完成需要花費(fèi)的時(shí)間,默認(rèn)值是0
3.animation-timing-function屬性
定義:設(shè)置對(duì)象動(dòng)畫(huà)的過(guò)渡類型
參數(shù)說(shuō)明:與transition-timing-function屬性的參數(shù)一樣
屬性
定義:設(shè)置動(dòng)畫(huà)的延遲時(shí)間
語(yǔ)法:animation-delay:time
參數(shù)說(shuō)明:可選值,定義動(dòng)畫(huà)開(kāi)始前等待的時(shí)間,以秒或者毫秒數(shù)計(jì)數(shù),默認(rèn)值是0
5.animation-iteration-count屬性
定義:設(shè)置對(duì)象動(dòng)畫(huà)的循環(huán)次數(shù)
語(yǔ)法:animation-iteration-count : infinite | number
參數(shù)說(shuō)明:
number為數(shù)字,其默認(rèn)值是1
infinite:無(wú)限循環(huán)次數(shù)
屬性
定義:設(shè)置對(duì)象動(dòng)畫(huà)是否反向運(yùn)動(dòng)
語(yǔ)法:
animation-direction:normal , reverse , alternate , alternate-reverse
參數(shù)說(shuō)明:
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ù)說(shuō)明:
paused : 指定暫停動(dòng)畫(huà)
running : 默認(rèn)值,制定正在運(yùn)行的動(dòng)畫(huà)
示例:鼠標(biāo)移動(dòng)到box上暫停動(dòng)畫(huà)
#box:hover{
animation-play-state: paused;
}
設(shè)置動(dòng)畫(huà)結(jié)束后的狀態(tài)
none:默認(rèn)值。不設(shè)置對(duì)象動(dòng)畫(huà)之外的狀態(tài),DOM未進(jìn)行動(dòng)畫(huà)前狀態(tài)
forwards:設(shè)置對(duì)象狀態(tài)為動(dòng)畫(huà)結(jié)束時(shí)的狀態(tài),99.99%或to時(shí),當(dāng)設(shè)置animation-direcdtion為reverse時(shí)動(dòng)畫(huà)結(jié)束后顯示為keyframes一幀
backwards:設(shè)置對(duì)象狀態(tài)為動(dòng)畫(huà)開(kāi)始時(shí)的狀態(tài),(測(cè)試顯示DOM未進(jìn)行動(dòng)畫(huà)前狀態(tài))
both:設(shè)置對(duì)象狀態(tài)為動(dòng)畫(huà)結(jié)束或開(kāi)始的狀態(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://muchs.cn/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)
猜你還喜歡下面的內(nèi)容