controls---控制臺---用在video audio
canvas----畫圖-js來配合操作
H5新標簽-header凹联，footer，nav趋翻，sction醉蚁，arcticle--語義化
border-radius:50%;----圓角屬性
transition:0.3s all ease;---過度-簡易動畫-時間-全部-動作形式
瀏覽器內(nèi)核前綴：有一些兼容高版本的可以不加燃辖，有一些就算是高版本，也得加上网棍。
-webkit-黔龟，-moz-(火狐),-ms-(IE),-o-(O朋)
定義一個動畫：
@-webkit-keyframes tab{
form{
width:200px; height:200px; background:red;
}
to{
background:blue; border-radius:50%;
}
}
keyframes(關鍵幀；關鍵影格；鍵架);
調(diào)用一個動畫
-webkit-animation:tab 2s infinite;
/infinite-(無限循環(huán))linear-(勻速)ease-in-out-(先快后慢)/
背景透明： background:rgba(255,0,0,0.5-(透明選項));
盒子陰影 : box-shadow:5px 5px 5px 5px #000;
1.x軸偏移量(值大往右)氏身；
2.y軸偏移量(值大往下)巍棱；
3.模糊度(值越大越模糊)；
4.陰影大小(值越大陰影越大);
5.顏色
盒子內(nèi)陰影:inset;
------box-shodow:inset 5px 5px 5px 5px #000;
文字陰影：text-shadow:5px 5px 5px #000;
1.x軸偏移量(值大往右)蛋欣；
2.y軸偏移量(值大往下)航徙；
3.模糊度(值越大越模糊)；
4..顏色
背景色漸變:
線性漸變：background:-webkit-linear-gradint(方向,red,yellow,red)
方向：
1.left top
2.left
3.top
4.right
5.bottom
6.45deg--45度(可以是負的)
漸變區(qū)域:
background:-webkit-linear-gradient(red 100px,blue);--前面的 red 占100px陷虎，100px往上才開始漸變
區(qū)域值：px %
背景色多個漸變:
background:linear-gradient(45deg,red 25%,blue 25%,blue 50%,yellow 50%,yellow 75%,green 75%);
gradient(傾斜度)捉偏；linear(線性，直線)泻红；
徑向漸變:
background:radial-gradient(顏色1,顏色2...);
徑向形狀:
background:radial-gradient(形狀,red,blue);
形狀：
1.橢圓---ellipse
2.圓----circle
3.background:radial-gradient(x y,red,blue);
x軸橢圓度
y軸橢圓度
區(qū)域大小：
background:radial-gradient(circle,red 50%,blue 50%);

圓心位置：
background:-webkit-radial-gradient(位置,circle,red,blue);

                     位置：
            1.left top
            2.left
            3.top
            4.right
            5.bottom
            6.center

            7.background:-webkit-radial-gradient(x y,100px 50px,red,blue);
            x軸移動的位置
            y軸移動的位置

注意：background:-webkit-radial-gradient(100px 50px,red,blue)
里面的倆個數(shù)寫了前綴的時候默認是位置霞掺！
不寫是橢圓度谊路！

重復漸變：
-webkit-repeating-linear-gradient(red 0px,blue 10px);

    -webkit-repeating-linear-gradient(45deg,red 0px,red 10px,blue 10px,blue 20px);

蒙版:
類似背景圖
-webkit-mask:url(mb1.png) no-repeat 0 0;
background：url，url菩彬，url;
背景尺寸:
background-size:值;
background-size:contain;(以高度為準不變形)
background-size:cover;(以寬度為標準不變形)
background-size:100%;

   背景圖生效的情況：

    div.box{ background-origin:border-box;}
    div.box2{ background-origin:padding-box;}
    div.box3{ background-origin:content-box;}   

背景圖從哪里開切：
    div.box{ background-clip:border-box;}
    div.box2{ background-clip:padding-box;}
    div.box3{ background-clip:content-box;}


文本開切：
    -webkit-background-clip:text; 
    color:rgba(0,0,0,0)

倒影:-webkit-box-reflect: 方向 距離 漸變缠劝；
方向:
-1.below---向下
-2.above---向上
-3.left-------左邊
-4.right-----右邊
reflect（ 反映；反射骗灶，照出惨恭；表達；顯示;反拾业）

濾鏡：
filter：blur（10px）脱羡；----模糊度！
invert----反色
grayscale---灰色

縮放：
textarea ------resize:none;
resize:none;
both/horizontal/vertical/none

選擇器：
document.querySelectorAll('.red')---獲取一組元素
document.querySelector('#box');----獲取一個

      data:自定義屬性免都；
                               obj.dataset.xxx------設置自定義屬性
      有利于遍歷循環(huán)锉罐！ data-aa='123'

選項卡：
aBtn[i].index=i;----this.index

aBtn[i].dataset.index=i;--this.dataset.index

class操作！

aDiv[i].classList
    .add('active'); 添加
    .remove('active'); 刪除
    .contains('active');可以判斷標簽上是否有這個class
    .toggle('active');切換class绕娘，反選

css3選擇器：
屬性選擇器：
input[name=value]{}
[name]{}
div[name=value]---只要包含這個value都可以選中
div[name^=value]---
以value這個詞開頭的
div[name$=value]---
以value這個詞結尾的
div[name|= value]
整個是一個value脓规，或者是以value開頭（value-abc）
div[abc][title]
只要滿足這上寫的屬性就可以
div[abc],[title]
只要有上的abc，title都可以選中

結構性偽類選擇器：
li:nth-child(1) ---在css中從1開始計算
li:nth-child(n) 第n個
li:nth-child(2n) 偶數(shù)
li:nth-child(even)
li:nth-child(2n-1) 奇數(shù)
li:nth-child(odd)
li:nth-last-child(1) 倒數(shù)第一個
li:nth-child(3n)---以3的倍數(shù)险领，一個一個變紅侨舆！
li:first-child 第一個
li:last-child 最后一個

*:nth-child(1)---所有標簽里面子級的第一個！＞钅啊挨下！
body *:nth-of-type(1)--所有標簽同類型里面的第一個元素
body *:nth-last-of-type(1)
所有標簽同類型里面的倒數(shù)第一個元素

li:empty 選中空元素的！
input:disabled{選中不可用的元素
border:2px solid red;
}
input:enabled{選中可用元素
border:2px solid blue;
}
input:checked{選中就變大
width:80px;
height:80px;
}

box~p #box同級后面的元素p

box>p #box離它最近子級p

h1:not(.red){ 選中不包含.red的元素
background:red;
}
p:first-line{//一段文字里面的第一行下面！
background:red;
color:#fff;
}
p:first-letter{//一段文字里面第一個字
background:red;
color:#fff;
font-size:30px;
}
p::selection{//p選中文本的顏色和字顏色
background:green;
color:yellow;
}
::selection{全部選中文本的顏色和字顏色
background:green;
color:yellow;
}
p:after{文本后面添加內(nèi)容
content:'你好复颈，下來吃飯';
color:red;
}

旋轉(zhuǎn)：
transform:rotate(30deg);
-webkit-
-moz-
-ms-
-o-

動畫：
transition:時間 all ease；
----上下滑動幻燈片！

transform：rotate（45deg）耗啦；
旋轉(zhuǎn)45deg凿菩；
transform--------變形
transform:translate(100px,200px)--平移
translate(x,y)
x正數(shù)向右
y正數(shù)向下
transform:scale(x,y)-------縮放比例

transform:skew(0deg,45deg)---傾斜度

好處：
物體本身沒有發(fā)生變化，盒子模型沒有改變帜讲，不會不會引起瀏覽器重繪衅谷，---性能高！
只是視覺上的變化似将！
注意：span a 這些行內(nèi)元素識別這些樣式获黔！必須的轉(zhuǎn)換：塊，行內(nèi)快在验！
簡寫：transform:多個值

以........為中心點
transform-origin:x,y;------x與y軸焦點就是中心點玷氏；
文字陰影:
text-shadow:1px 1px 1px red;---x y 模糊度 顏色
疊加效果:

                text-shadow:100px 2px 4px red,110px 4px 8px blue,120px 8px 16px green;          

文本描邊：
-webkit-text-stroke:2px #fff;

文字模糊：

color:rgba(0,0,0,0);
text-shadow:0 0 100px #fff;
塊陰影--內(nèi)
text-shadow:1px 1px 1px 1px red
x y 模糊度 大小 顏色
text-shadow:inset 1px 1px 1px 1px red
內(nèi) x y 模糊度 大小 顏色
box-shadow:5px 0 2px red,0 2px 2px green;