h5屬性整理

1.icon能夠用before等僞元素；還有遮罩背景圖。定位，圖形拼接等等；插入圖片
2.nth-child(2n)全部偶數，2n-1全部奇數；
3.div:first-line（）第一行的樣式；父元素下第一子元素；
4.:nth-child()能夠選擇某個的一個或多個特定的子元素，你能夠按這種方式進行選擇
5.only-child（）選擇父元素中惟一的子元素，
6.first-of-type(),選擇同類型的第一個同級兄弟元素；
7. p:not(.first) 選取某個元素以外的全部元素；頗有用；
8. :target h3{
color:red;
}這個通常結合錨點使用；
9. ：focue{ color:red} 當輸入框聚焦是，文字變紅；
10. p::selection{ background:red;color:blue }選中時，文字背景變紅色，字變藍色
注意：單冒號是僞類，雙冒號的是僞元素；

css3的文本屬性；
1.陰影
text-shadow：x陰影 y陰影 模糊半徑 陰影顏色；text-shadow能夠接收多個陰影效果值；能夠製做凸出的字，設置上與左爲白色便可，下與右是凹陷的字效果；
2.text-stroke文字描邊；
text-stroke:1px red;文字被描一像素的紅邊；
3.text-overflow:ellipsis(省略號顯示)/clip（直接裁掉）;
4.white-space:nowrap;強制文本在一行內顯示；
5.word-wrap:break-word;強制換行；
6.css3的RGBA顏色
rgba中：r是紅色值，g是綠色值，b是藍色值（rgb正常取值是0-255）a是透明度；
7.css漸變類型；
css3漸變共兩種：線性漸變與徑向漸變
①線性漸變，指在一條直線上進行漸變，在網頁中大多數是線性漸變；
background：linear-gradient（方向，開始顏色，結束顏色）
線性漸變的方向也能夠是角度（90deg）規定顏色佔的尺寸（red 100px,blue 100px）
重複漸變background:repeating-linear-gradient(red 100px,yellow 200px);

②徑向間，是從起點到終點顏色從內到外圓形漸變（從中間向外360擴散）；
background: radial-gradient(方向 圓形或者橢圓 半徑, start-color, last-color);

js添加的東西

1.classNameList.add/remove/toggle(切換); 添加新的class或者刪除；
2.forEach(function( element,index){ 執行函數 })
element是循環的每個元素，index是下標；index包一層函數仍是能夠用的；
3. JSON.parse(json );將json轉換成字符串對象；
JSON.stringify( str);將字符串轉換成json對象；
4.自定義屬性
obj.dataset.attr = value -> 賦值
obj.dataset.attr -> 取用
5,。屬性選擇器；
[attr=value] 屬性選擇 屬性attr的值以val開頭的；
[attr$=value] 結尾匹配 以value 結尾的
[attr|=valur] 匹配以橫線鏈接的單詞，首個單詞爲value的；
[attr~=value] 匹配空格隔開的單詞，只要有value 就被選中；
[attr*=value] 只要包含value的字符串就能夠；

6.box-shadow:x位移 y位移 模糊半徑 彌散半徑 陰影顏色；第四個值能夠省略；inset加上這個屬性陰影向內展示；
7.border-radius:上 右 下 左；四個角的值；也能夠跟%值像素值；四個角360是一個圓；radius也支持單獨一個角設置圓角；好比 border-top-left-radius:90px;注意在寫方向的時候上下寫在前面，top和bottom要在前面不然沒有效果；
8. js方法獲設置屬性的，
①ali.setAttribute('index',i)屬性名，屬性值；獲取直接是getAttribute(屬性名)便可
②aLi[i].dataset.index = i; index是屬性名。訪問的時 this.dataset.屬性名便可；
9,。設置背景圖
background-attachment:fixed; 背景圖不隨內容滾動；
height:400px; 背景圖顯示大小；
background-size:cover; 背景圖是否平鋪；設置背景圖片大小
background-image:url(),url(),後面能夠連接多個背景圖片；在url地址前開始設定方向（top right,bottom left）等注意也是上下寫在左右前面；
background-image:linear-gradient(red,rgba(100,10,50,0)) 背景圖也能夠漸變；
background-origin:背景圖片從什麼位置平鋪；
border-box;邊框開始；
content-box從內容開始；
padding-box從內邊據開始（默認）、
background-clip背景圖片剪切。接受值與origin同樣；

 

10.mask
11.本地存儲；

12.resize容許更改指定元素的大小；
resize:both可調整元素的高度和寬度；
resize:horizontal調整元素的寬度；
resize:vertical調整元素的高度；
搭配 overflow:auto;這個屬性使用
13.text-overflow：ellipsis;超出顯示省略號；須要搭配overflow：hidden；White-space；一塊兒使用；

14。transform動畫過分；後面接收四個值；name持續時間，運動函數，延遲時間；
name運動函數延遲時間能夠省略；

15.倒影 box-reflect：倒影方向，間隔，漸變顏色； 還能夠跟url()....背景圖；
倒影方向由四個值：
left，right，above，below；
16;要想循環事後使用i能夠用es6進行解析使用i或者index；
17，濾鏡filter:blur(模糊大小)
filter:drop-shadow(12px 12px 1px red)陰影；
filter: brightness(2)亮度；
filter: saturate(10)飽和度；
18.animation動畫；
①設置動畫；
animation-name動畫名字；
animation-duration1s;動畫持續時間；
animation-fill-mode:forwards;動畫播放完畢後，是否使用最後的樣式；
animation-timing-function：動畫播放模式；加速仍是勻速；
animation-iteration-count ：動畫播放次數；來回算兩次播放量；
animation-direction：alternate；是否反向播放；意思就是在播放到達指定位置的時候；是否從指定位置再次播放到以前；
animation-play-state：paused暫停、running繼續播放；是否播放時暫停
②引用動畫
@keyframes 動畫名{
form{
transform: translate(10px,20px) ;初始位置
}
to{
transform: translate(100px,200px) ;終點位置
}
}

19.transform：變形
1.translate（）位移，數值px;
2.skew（）傾斜接收角度值deg；x軸y軸傾斜相同角度一個正數一個負數，出現旋轉的效果；內容相反方向旋轉；顯示不動；
3.rotate( )旋轉，接收角度值；
4.scale（)縮放，接收的是倍數數值；-1倍至關於沿x軸旋轉180度；
複合動畫； rotate( ),translate( );skew(45deg,-45deg ),scake( 2)搭配使用；
20：開啓3d視角；
transform-style:preserve-3d;
perspective:800px;
21

backface-visibility: hidden;