controls---控制臺---用在video audio
canvas----畫圖-js來配合操作
H5新標簽-header，footer，nav，sction，arcticle--語義化
border-radius:50%;----圓角屬性
transition:0.3s all ease;---過度-簡易動畫-時間-全部-動作形式
瀏覽器內核前綴：有一些兼容高版本的可以不加，有一些就算是高版本，也得加上。
-webkit-，-moz-(火狐),-ms-(IE),-o-(O朋)
定義一個動畫：
@-webkit-keyframes tab{
form{
width:200px; height:200px; background:red;
}
to{
background:blue; border-radius:50%;
}
}
keyframes(關鍵幀；關鍵影格；鍵架);
調用一個動畫
-webkit-animation:tab 2s infinite;
/infinite-(無限循環)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.顏色
盒子內陰影: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度(可以是負的)
漸變區域:
background:-webkit-linear-gradient(red 100px,blue);--前面的 red 占100px，100px往上才開始漸變
區域值：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軸橢圓度
區域大小：
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)
里面的倆個數寫了前綴的時候默認是位置！
不寫是橢圓度！
重復漸變：
-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------設置自定義屬性
有利于遍歷循環！ 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) 偶數
li:nth-child(even)
li:nth-child(2n-1) 奇數
li:nth-child(odd)
li:nth-last-child(1) 倒數第一個
li:nth-child(3n)---以3的倍數，一個一個變紅！
li:first-child 第一個
li:last-child 最后一個
*:nth-child(1)---所有標簽里面子級的第一個！！！
body *:nth-of-type(1)--所有標簽同類型里面的第一個元素
body *:nth-last-of-type(1)
所有標簽同類型里面的倒數第一個元素
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{文本后面添加內容
content:'你好，下來吃飯';
color:red;
}
旋轉：
transform:rotate(30deg);
-webkit-
-moz-
-ms-
-o-
動畫：
transition:時間 all ease；
----上下滑動幻燈片！
transform：rotate（45deg）；
旋轉45deg；
transform--------變形
transform:translate(100px,200px)--平移
translate(x,y)
x正數向右
y正數向下
transform:scale(x,y)-------縮放比例
transform:skew(0deg,45deg)---傾斜度
好處：
物體本身沒有發生變化，盒子模型沒有改變，不會不會引起瀏覽器重繪，---性能高！
只是視覺上的變化！
注意：span a 這些行內元素識別這些樣式！必須的轉換：塊，行內快！
簡寫：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;
塊陰影--內
text-shadow:1px 1px 1px 1px red
x y 模糊度 大小 顏色
text-shadow:inset 1px 1px 1px 1px red
內 x y 模糊度 大小 顏色
box-shadow:5px 0 2px red,0 2px 2px green;
