2022-08-19 分類: 網站建設
CSS3的新特性大致分為以下六類
選擇器
邊框與圓角
背景與漸變
過渡
變換
動畫
下面分別說一說以上六類都有哪些內容
CSS3選擇器
1.基本選擇器
基本選擇器又分為
子選擇器
相鄰兄弟選擇器
通用兄弟選擇器
群組選擇器
2.屬性選擇器
1.element[attribute]
為帶有attribute屬性的元素設置樣式
2.element[attribute='value']
為attribute='value'屬性的元素設置樣式
3.element[attribute~='value']
選擇attribute屬性值包含 單詞value的元素 并設置樣式
4.element[attribute*='value']
選擇attribute屬性值包含value的元素設置樣式
5.element[attribute^='value']
選擇attribute屬性值是以value開頭的元素
6.element[attribute$='value']
選擇attribute屬性值是以value結尾的元素
注意比較3和4的區別
3.偽類選擇器
定義:這些偽類并不存在于HTML中,只有當用戶和網站交互的時候才能體現出來。
1.錨點偽類
:link
:visited
2.用戶行為偽類
:hover
:active
:focus
3.目標偽類
:target
當我們點擊錨點鏈接時,對應id的元素會顯示在視口
狀態偽類
這里我們需要知道checkbox只能設置寬高,不能設置背景和邊框,如果想要設置那么我們需要用appearance:none;來清除input的默認樣式
:first-child/last-child
語法 element:first-child
選擇屬于父元素的首個/最后一個子元素的每個element元素,注意element為子元素。
:nth-child(n)
選擇某元素下的第n個element元素(n是一個簡單的表達式,不能用其他的字母代替),括號里還可以傳odd和even兩個關鍵字
:nth-last-child(n)
匹配屬于某元素下的第n個element子元素,從最后一個子元素開始計數
:nth-of-type(n)
語法 element:nth-of-type(n)
匹配屬于父元素的特定類型的第n個子元素,element為指定類型的子元素
:nth-last-of-type
匹配屬于父元素的特定類型的第n個子元素,從最后一個計數
:first-of-type/:last-of-type
匹配屬于其父元素的特定類型的首個/最后一個子元素的每個元素
:only-child
匹配屬于父元素的唯一子元素的每個元素
:only-of-type
匹配屬于其父元素特定類型的唯一子元素的每個元素
:empty
匹配沒有子元素(包括文本節點)的每個元素
定義:匹配非 元素或者選擇器 的每個元素
語法:父元素:not(子元素或者選擇器)
例:ul:not(span){}
element::first-line
定義:對元素的一行文本進行設置,只能用于塊級元素
element::first-letter
定義:用于向文本的首字母設置特殊樣式,只能用于塊級元素
element::before
定義:在元素的內容前面插入新內容,常與content配合使用
element::after
定義:在元素的內容后面插入新內容,常與content配合使用
element::selection
定義:用于設置瀏覽器中選中文本后的背景色與前景色
偽元素與元素的區別:
無法通過JS獲取其DOM
無法通過瀏覽器開發者工具直接查看
偽元素默認是 inline
使用偽元素注意事項:
1.使用偽元素before,after必須設置content
2.使用偽元素before,after顯示背景圖,一定要使用display設置為塊元素
3.使用偽元素before,after設置為display:inline-block,需要再次設置vertical-align:middle
CSS3邊框與圓角
圓角border-radius
定義:可以為元素添加圓角邊框(塊元素,行內塊元素,行內元素)
屬性:
border-top-left-radius 左上角
border-top-right-radius 右上角
border-bottom-right-radius 右下角
border-bottom-left-radius 左下角
復合屬性:border-radius:
屬性值
四個值:左上角 右上角 右下角 左下角
三個值:左上角 右上角和左下角 右下角
兩個值:左上角和右下角 右上角和左下角
一個值:4個角都生效
border-radius中的屬性值由兩個參數值構成: value1 / value2,值之間用/分隔,value1代表圓角的水平半徑,value2代表圓角的垂直半徑。
圓形與橢圓:
一旦使用百分比,參照的是元素本身的高度與寬度
當拿50%時,寬等于高為圓形 寬不等于高為橢圓形
2.盒陰影box-shadow
定義:可以控制一個或多個下拉陰影的框
語法:box-shadow: 水平方向的偏移量 垂直方向的偏移量 模糊程度 擴展程度 顏色 是否具有內陰影
屬性值的介紹:
偏移量:
把元素左上角(0,0)作為基準點,找水
平方向和垂直方向的偏移量
水平: 正值 --- 右 ,負值 --- 左
垂直: 正值 --- 下 ,負值 --- 上
模糊程度:
邊界模糊,但是邊界線未動
由邊界線向外模糊多少像素
擴展程度:
盒子陰影,上下左右都向外擴展多少像素
是否具有內陰影:
inset(默認沒有,也就是默認是外陰影)
加上inset,盒子的陰影為內陰影
擴展程度可為負值,但是模糊程度不可以
CSS3背景與漸變
背景
background-image
語法:
backgroundimage:url('),url('')
使用逗號把圖片分開
注意:元素引入多個背景圖片,前面圖片會覆蓋后面的圖片
background-cilp
定義:指定背景的繪制區域(裁剪)
語法:
background-cilp:border-box / padding-box / content-box
屬性介紹:
border-box:背景被裁剪到邊框盒(從邊框開始繪制背景圖片)---默認
padding-box:背景被裁剪到內邊距框(從內邊距開始繪制背景圖片)
content-box:背景被裁剪到內容框
background-origin
定義:設置背景圖像的原始起始位置
語法:
background-origin:border-box / padding-box / content-box(背景圖片坐標原點與這三個有關系)
屬性的介紹:
border-box:相對于邊框來定位
padding-box:相對于內邊距來定位
content-box:相對于內容框來定位
另外有一個需要了解
background-position:定義背景圖片的位置,水平與垂直方向上面的偏移量(參考點)
background-repeat
定義:設置是否及如何重復背景圖像,默認地,背景圖像在水平和垂直方向上重復。
屬性值:
repeat 默認。背景圖像將在垂直方向和水平方向重復。
repeat-x 背景圖像將在水平方向重復。
repeat-y 背景圖像將在垂直方向重復。
no-repeat 背景圖像將僅顯示一次。
inherit 規定應該從父元素繼承 background-repeat 屬性的設置
background-size
定義:指定背景圖像的大小
語法:
background-size:number / % / cover / contain
屬性介紹:
number: 寬度 高度(如果只寫一個數值,第二個數值默認auto)
百分比: 0% - 99.99% 之間的任何值,此時的百分比參照于元素div的大小
cover:將背景圖片等比縮放以填滿整個容器(最遠邊),如果高度達到一定比例99.99%,寬度多出的會溢出,但是,具體那部分溢出取決于定位
contain:將背景圖片等比縮放至某一邊緊貼容器邊緣為止(最近邊),如果圖片高度比較小,高度就會有空白區域出現
復合屬性background
定義:可以在一個聲明中設置所有的背景屬性
語法:
background:color position size repeat origin clip attachment image; background: #abc center 50% no-repeat content-box content-box fixed url('') ,url('')...
漸變
定義:可以在兩個或者多個指定顏色之間顯示平移的過渡
線性漸變
定義:是沿著一根軸線改變顏色,從起點到終點進行順序漸變(從一邊拉向另一邊)
語法:background:linear-gradient(方向,開始顏色,結束顏色)
1.方向從上到下(默認)
background: linear-gradient(red,blue);
2.方向從左到右
background: linear-gradient(to right,red,blue);
3.對角
background: linear-gradient(to right bottom,red,blue);
4.角度(單位deg)
background: linear-gradient(角度,red,blue);
角度說明:0deg 將創建一個從下到上的漸變,90deg將創建一個從左到右的漸變
background: linear-gradient(red 10%,blue 20%,green 30%,yellow 40%);
從0%到10%,為紅色,從10%到20%為紅色到藍色的漸變,從20%到30%為藍色到綠色的漸變,從30%到40%,為綠色到黃色的漸變,從40%到99.99%為黃色
background: linear-gradient(red 10%,blue);
從0%到10%,為紅色,從10%到99.99%為紅色到藍色的漸變
最后如果不寫具體數值,默認到99.99%
background: linear-gradient(red,blue 30%);
從0%到30%,為紅色到藍色的漸變
如果一個不寫,默認數值是 0%
background:lineargradient(rgba(255,0,0,0),rgba(255,0,0,1));
由透明色變為不透明色
示例:background: repeating-linear-gradient(90deg,red 0%,blue 20%);或者 background: repeating-linear-gradient(90deg,red 0%,blue 10%,red 20%);
注意:把元素的整體寬度看成99.99%
徑向漸變
定義:從起點到終點,顏色從內向外進行圓形漸變
語法:background:radial-gradient(形狀尺寸,開始顏色,結束顏色)
形狀分類:
circle --- 圓形
ellipse --- 橢圓形
注意:當元素的高和寬一樣時,參數無論設置哪個,都是圓形
尺寸大小:
closest-side最近邊
background: radial-gradient(closest-side circle,red , blue);
farthest-side 最遠邊
background: radial-gradient(farthest-side circle,red , blue);
closest-corner最近角
background: radial-gradient(closest-corner circle,red , blue);
farthest-corner最遠角
background: radial-gradient(farthest-corner circle,red , blue);
顏色結點:
例:
background:radial-gradient(circle,red 50% ,blue 70%);
注意:此時的百分比,指的是圓心到元素最遠端的距離(角度)
重復漸變 :
示例: background: repeating-radial-gradient(red 0%,blue 20%);
background: repeating-radial-gradient(red 0%,blue 10%,red 20%);
CSS3過渡
定義:允許css的屬性值在一定時間區間內平滑的過渡,在鼠標點擊,鼠標滑過或對元素任何改變中觸發,并圓滑地以動畫形式改變css的屬性值。
屬性:
屬性
定義:設置對象中的參與過渡的屬性
語法:transition-property:none | all | property
參數說明:
none: 沒有屬性改變
all : 默認值,所有屬性都改變
property: 元素的屬性名 width,color等
屬性
定義: 設置對象過渡的持續時間
語法:transition-duration:time
參數說明:
規定完成過渡效果需要花費的時間,以秒或者毫秒計,默認值0
3.transition-timing-function屬性
定義:設置對象中過渡的動畫類型
語法:只能使用一個屬性值
參數說明:
ease:平滑過渡(0--慢--快--慢),默認值
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屬性
定義:設置對象延遲的過渡時間
語法:transition-delay:time
參數說明:
指定秒或者毫秒數來延遲動畫效果的開始,默認是0
5.transition復合屬性
語法:
transition : property duration timing-function delay;
參數說明:過渡時間和延遲時間的順序不能亂
CSS3變換
定義:讓一個元素在一個坐標系統中變形,這個屬性包含一系列的變形函數,可以移動,旋轉,縮放元素。
語法:transform:none | <transform-function> 默認值是none
2d變換
1.rotate()旋轉
定義:通過指定一個角度參數,對元素指定一個2D的旋轉
語法:transform:rotate(angle) 單位deg
參數說明:angle指旋轉角度,正數表示順時針旋轉,負數表示逆時針旋轉
2.translate()平移
定義:根據X軸和Y軸的位置給定參數,使當前元素位置移動
分類:
translateX() 僅水平方向移動
語法:transform:translateX() 單位px
translateY() 僅垂直方向移動
語法:transform:translateY() 單位px
translate(x,y) 水平方向和垂直方向同時移動
語法:transform:translate( X, Y) 單位px
注意:如果只寫一個參數,第二個默認是0,也就是只設置了水平方向上的位移
3.scale( )縮放
定義:設置元素的縮放程度
分類:
scaleX( ) 僅水平方向縮放
語法:transform:scaleX() 沒有單位
scaleY( ) 僅垂直方向縮放
子主題 語法:transform:scaleY() 沒有單位
scale(x,y) 使元素水平和垂直方向同時縮放
語法:transform:scale(x,y) 沒有單位
4.skew()扭曲/傾斜
定義:設置元素的傾斜狀態
分類:
skewX( ) 僅使元素在水平方向上扭曲變形 單位deg 正值 ----逆時針
skewY( ) 僅使元素在垂直方向上扭曲變形 單位deg 正值 ----順時針
skew( ) 使元素在水平方向和垂直方向上扭曲變形 單位deg
注意:0deg與180deg 效果一樣
5.變換基點
定義:元素變換的基準點
語法: transform-origin:水平方向 垂直方向
參數說明:
left top 左上角 ----四個角均可以
25% top
50px 50px
默認值:
rotate 幾何中心點
skew 幾何中心點
scale 幾何中心點
translate 本身位置
3d變換
1.開啟3d空間transform-style: preserve-3d; 一般給父元素開啟
2.子元素設置3d變換效果
rotate
rotateX()
定義:指對象在X軸上的旋轉角度(變換基點: 50% 50% 0)
rotateY()
定義:指對象在Y軸上的旋轉角度(變換基點: 50% 50% 0)
rotateZ()
定義:指對象在Z軸上的旋轉角度(變換基點: 50% 50% 0)
translate
translateZ()
定義:指對象在Z軸上面的平移(變換基點: 50% 50% 0)
scale
scaleZ()
定義:指定對象的Z軸縮放(變換基點: 50% 50% 0)(無太大意義,開啟3d空間)
3.設置景深:實現近大遠小
父元素子元素都可以設置
父元素:perspective: 300px;
子元素:
transform:perspective(300px) translateZ(-200px);
注意:景深:可選值:大于或等于0,景深值越大,元素看起來越大
默認值: 0 -- 沒有景深 (不能為負值)
4.變換基點
默認值: 50% 50% 0
transform-origin: top; 關鍵字表示 ( 50% 0 0 )
注意:立體3d盒子 Z:只能使用具體的長度,不能使用百分比和關鍵字
5.景深中心點:改變觀察者視角
perspective-origin: top;
perspective-origin: top right;
6.元素背面可見還是不可見
backface-visibility:visible ;(默認值:可見)
backface-visibility: hidden; 不可見
CSS3動畫
定義:使元素從一種樣式逐漸變化到另外一種樣式的效果
@keyframes
定義:keyframes關鍵幀,用來決定動畫變化的關鍵位置
注意:keyframes 控制關鍵位置,并不是所有的位置
語法:@keyframes animationname{
keyframes-selector{
cssStyles;
}
}
animationname:必寫項,定義動畫的名稱
keyframes-selector:必寫項,動畫持續時間的百分比 0% - 99.99%之間, 或者使用form和to關鍵字也可以設置,form代表0%,to代表99.99%
示例:
@keyframes abc {
from{transform: rotate(0)}
50%{transform:rotate(90deg)}
to{transform: rotate(360deg)}
}
animation屬性
屬性
設置對象所應用的動畫名稱
語法:
animation-name:keyframename | none
參數說明:
keyframename:指定要綁定到選擇器的關鍵幀的動畫名稱
屬性
定義:設置對象動畫的持續時間
語法:animation-duration:time
參數說明:指定對象播放完成需要花費的時間,默認值是0
3.animation-timing-function屬性
定義:設置對象動畫的過渡類型
參數說明:與transition-timing-function屬性的參數一樣
屬性
定義:設置動畫的延遲時間
語法:animation-delay:time
參數說明:可選值,定義動畫開始前等待的時間,以秒或者毫秒數計數,默認值是0
5.animation-iteration-count屬性
定義:設置對象動畫的循環次數
語法:animation-iteration-count : infinite | number
參數說明:
number為數字,其默認值是1
infinite:無限循環次數
屬性
定義:設置對象動畫是否反向運動
語法:
animation-direction:normal , reverse , alternate , alternate-reverse
參數說明:
normal : 正常方向
reverse :反向運動
alternate : 先正常運動在反向運動,并持續交替運行, 需要配合循環屬性使用
alternate-reverse : 先反向運動在正常運動,并持續交替運行, 需要配合循環屬性使用
屬性
定義:指定對象是否正在運行或已暫停
語法:animation-play-state:paused | running
參數說明:
paused : 指定暫停動畫
running : 默認值,制定正在運行的動畫
示例:鼠標移動到box上暫停動畫
#box:hover{
animation-play-state: paused;
}
設置動畫結束后的狀態
none:默認值。不設置對象動畫之外的狀態,DOM未進行動畫前狀態
forwards:設置對象狀態為動畫結束時的狀態,99.99%或to時,當設置animation-direcdtion為reverse時動畫結束后顯示為keyframes一幀
backwards:設置對象狀態為動畫開始時的狀態,(測試顯示DOM未進行動畫前狀態)
both:設置對象狀態為動畫結束或開始的狀態,結束時狀態優先
復合屬性(不推薦使用 )
語法:
animation : name duration timing-function delay interation-count direction play-state
注意:在css3里面,給元素設置圓角、陰影、變換等屬性時,盡管外形位置發生改變,但是元素本身大小和位置不變
網頁標題:CSS3有哪些新特性
標題來源:http://m.newbst.com/news13/191413.html
成都網站建設公司_創新互聯,為您提供品牌網站制作、品牌網站設計、網站設計、網頁設計公司、網站排名、關鍵詞優化
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯
猜你還喜歡下面的內容