css3 選擇器
o 屬性選擇器
[屬性名] 可以選擇到官方或者自定義的屬性
[屬性名="屬性值"] 匹配屬性值
[屬性名~=""] 包含該值必須單獨出現(xiàn)的
[屬性名*=""] 只要包含該值就行
[屬性名^=""] 以該值開頭
[屬性名$=""] 以該值結(jié)尾
o 偽類選擇器
構(gòu)性偽類選擇器（child 系列）
1.E:first-child E 必須是父元素里面的第一個孩子
2.E:last-child E 必須是父元素里面的最后一個孩子
3.E:**nth-child(n)** 不匹配前面的元素類型菱农，如果對應(yīng)的位置是該元素才匹
配
4. E:only-child 必須只有他自己一個孩子
結(jié)構(gòu)性的偽類選擇（type 系列）
1.E:first-of-type 匹配到該元素中的第一個孩子
2.E:last-of-type 匹配到該元素的最后一個孩子
3.E:**nth-of-type(n)** 匹配到該元素的第幾個孩子 n 可以是表達(dá)式 2n 3n
2n+1 even(偶數(shù)) odd(奇數(shù))
4.E:nth-last-of-type(n) 匹配到該元素的倒數(shù)第幾個
目標(biāo)偽類：結(jié)合錨點使用
狀態(tài)偽類選擇器
1.:enabled 元素可編輯
2.:disabled 元素不可編輯
3.:checked 選中
4.::selection 高亮狀態(tài)一般修改字體顏色和背景色
動態(tài)偽類選擇器
1.:link 未訪問前
2.:visited 訪問過后
3.:hover 鼠標(biāo)滑過
4.:active 鼠標(biāo)點擊之后
層級選擇器
后代選擇器選擇器選擇器
子項選擇器選擇器>選擇器
相鄰的兄弟選擇器+選擇器緊挨著的兄弟
相鄰的兄弟們選擇器~選擇器緊挨著的弟弟們
o css3 屬性
陰影
1. box-shadow:x 軸偏移 y 軸偏移模糊距離陰影的顏色陰影的位置
（outset/inset）;
12
2. text-shadow:x 軸偏移 y 軸偏移模糊距離陰影的顏色;
透明
rgba 設(shè)置透明度
里面的內(nèi)容不會被模糊
opacity:0-1; 0 完全透明 1 不透明
1.里面的內(nèi)容也會被模糊
2.可以設(shè)置圖片的模糊
3.過渡效果對 display 的隱藏和出現(xiàn)沒有效果，可以通過設(shè)置 opacity
的值
背景
背景圖的原點 background-origin
1.padding-box 默認(rèn)值背景圖從 padding 區(qū)域開始顯示
2.content-box 背景圖從 content 區(qū)域開始顯示
3.border-box 背景圖從 border 邊框區(qū)域開始顯示
背景圖的裁切 background-clip
1.border-box 邊框之外裁切
2.padding-box padding 之外裁切
3.content-box 內(nèi)容區(qū)開始裁切
背景圖大小的設(shè)置 background-size
圓角 border-radius
1.一個值四個角
2.兩個值對角
3.三個值左上角右上角/左下角右下角
4.四個值左上角右上角右下角左下角（順時針的角度）
5.正圓 border-radius: 50%/100%;
圖片邊框 border-image
1.border-image:圖片路徑偏移重復(fù)
2.border-image-source:url() 圖片的路徑
3.border-image-slice:數(shù)值圖片的裁切不要加單位
4.border-image-repeat:平鋪(repeat) 鋪滿(round) 拉伸(stretch)默認(rèn)
過渡 transition：transition-property transition-duration transition-delay
transition-timing-function(順序不固定呐舔，當(dāng)只有一個時間的時候潜索，表示
過渡時間锦聊，兩個時間第一個表示過渡時間团赁，第二個表示延遲時間)
transition-property 需要過渡的屬性
transition-duration 過渡所需要的時間 s(秒)/ms(毫秒) 1s=1000ms
transition-delay 過渡延遲時間 s(秒)/ms(毫秒)
transition-timing-function 過渡效果
1.linear: 勻速
2.ease: 逐漸慢下來
3.ease-in: 加速
4.ease-out: 減速
5.ease-in-out 先加速后減速
動畫 animation：animation
使用：animation: 動畫名動畫持續(xù)時間延遲時間動畫效果執(zhí)行次數(shù)
13
animation-name: 動畫名
animation-duration: 動畫的持續(xù)時間 s/ms
animation-delay: 動畫的延遲時間 s/ms
animation-timing-function: 動畫的效果
animation-iteration-count: 具體的數(shù)值/infinite(無限循環(huán))
anmiation-direction: 動畫執(zhí)行的方向
1.normal 正向
2.reverse 反向
3. alternate 正向和反向交替運動
animation-play-state 動畫是否播放
1.running 播放默認(rèn)值
2.paused 暫停
定義動畫
css
@keyframes 動畫名{ from{} ==>0% to{}==>100%
}
關(guān)鍵幀分的是時間
@keyframes 動畫名{
0%{ css 屬性:css 屬性值
}
10%{} 0.5s
20%{} 1s
30%{}
100%{}
}
漸變
線性漸變
background-image/background:linear-gradient(方向,顏色 1,顏色 2……)
漸變方向
to bottom 向下
to right 向右
to top 向上
to left 向左
to right bottom 向右下角
to left top 向左上角
to right top 向右上角
to left bottom 向左下角
數(shù)值+deg(角度)
設(shè)置百分比
css
/* 0%-40% 是紅色的純色 40%-60% 紅色到藍(lán)色漸變
60%-100% ；藍(lán)色的純色*/
14
background: linear-gradient(red 40%, blue 60%);
重復(fù)性的線性漸變
background:repeating-linear-gradient(red 40%, blue 60%);
徑向漸變
bakrgound-image/background:radial-gradient(位置,顏色 1,顏色 2)
位置
center 中心
水平方向：left/center/right
垂直方向：top/center/bottom
兼容寫法
css background: radial-gradient(left, red, blue);
background: -webkit-radial-gradient(left, red, blue); background: -
ms-radial-gradient(left, red, blue);
重復(fù)性的徑向漸變
background: repeating-radial-gradient(red 20%, yellow 40%)
