瀏覽器前綴报嵌？

• 瀏覽器廠商以前就一直在實(shí)施CSS3,但是他還未成為真正的標(biāo)準(zhǔn)玻熙，為此叉庐，當(dāng)一些CSS3樣式語法還在波動(dòng)的時(shí)候裹匙，他們提出了針對(duì)瀏覽器的前綴瑞凑。
• CSS3去兼容不同的瀏覽器，針對(duì)舊的瀏覽器做兼容概页，新的瀏覽器基本上不需要加前綴籽御。

transition 過渡

• transition-property：規(guī)定設(shè)置過渡的CSS屬性的名稱
• transition-duration：規(guī)定完成過渡修熬過需要的多少秒或毫秒
• transition-delay：定義過渡效果何時(shí)開始（延遲：正數(shù)；提前：負(fù)數(shù)篱蝇；）
• transition-timing-function贺待；規(guī)定速度效果的速度曲線 （linear：勻速；ease：逐漸慢下來零截；ease-in：加速麸塞；ease-out：減速；ease-in-out：先加速后減速涧衙；cubic-bezier：貝爾曲線哪工；）
• 復(fù)合寫法：transition:屬性 過渡時(shí)間 延遲或提前時(shí)間 運(yùn)動(dòng)規(guī)律;
• 注意：不要寫在hover上

transform 變形

• translate : 位移 translatX translateY translateX(3d)
• scale : 縮放 scaleX scaleY scaleZ(3d)
• rotate : 旋轉(zhuǎn) (單位:deg) rotateX(3d) rotateY(3d) rotateZ (和rotate是等價(jià)的關(guān)系，正值是順時(shí)針旋轉(zhuǎn)弧哎，負(fù)值是逆時(shí)針旋轉(zhuǎn))
• skew : 斜切
  skewX: (單位--deg 正值向左傾斜雁比，負(fù)值向右傾斜。)
  skewY

==transform的注意事項(xiàng)==

• 1撤嫩、變形操作不會(huì)影響到其他元素偎捎。
• 2、變形只能添加給塊元素序攘。
• 3茴她、復(fù)合寫法，可以同時(shí)添加多個(gè)變形操作程奠。
  執(zhí)行是順序的丈牢。先執(zhí)行后面的操作，再執(zhí)行前面的操作瞄沙。translate會(huì)受到 rotate己沛、scale、skew的影響距境。

animation 動(dòng)畫

• animation-name：設(shè)置動(dòng)畫的名字（自定義的）
• animation-duration：動(dòng)畫持續(xù)的時(shí)間
• animation-delay：動(dòng)畫的延遲時(shí)間
• animation-iteration-count：動(dòng)畫的重復(fù)次數(shù)申尼，默認(rèn)值就是1，infinite就是無限
• animation-timing-function：動(dòng)畫的運(yùn)動(dòng)形式垫桂。

==注意==

1晶姊、運(yùn)動(dòng)結(jié)束后,默認(rèn)會(huì)停留在起始位置。
2伪货、form <==> 0% to <==> 100%
3、復(fù)合樣式：animation:動(dòng)畫（@keyframes）名 持續(xù)時(shí)間 延遲時(shí)間 重復(fù)次數(shù) 運(yùn)動(dòng)形式

animation-fill-mode

規(guī)定動(dòng)畫播放前后钾怔，其動(dòng)畫效果是否可見碱呼。

• none（默認(rèn)值）：在運(yùn)動(dòng)結(jié)束后回到初始的位置，在延遲的情況下宗侦，讓0%在延遲之后生效愚臀。
• backwards：在延遲的情況下，讓0%在延遲前生效矾利。
• forwards：在運(yùn)動(dòng)結(jié)束后姑裂，停留在結(jié)束的位置
• both：backwards和forwards同時(shí)生效馋袜。

animation-direction

屬性定義是否應(yīng)用該輪流反向播放動(dòng)畫

• alternate：一次正向（0% ~ 100%），一次反向（100% ~ 0%）
• reverse：永遠(yuǎn)都是反向舶斧，從100% ~ 0%
• normal（默認(rèn)值）：永遠(yuǎn)都是正向欣鳖，從0% ~ 100%；

animate.css

一款強(qiáng)大的預(yù)設(shè)css3動(dòng)畫庫

基本使用：
    animated：基類（基礎(chǔ)的樣式茴厉，每個(gè)動(dòng)畫效果都需要加）
    infinite：動(dòng)畫的無限次數(shù)
<link rel="stylesheet" href="animate.css">
<img src="" alt="" class="animated swing infinite" />

3D

transform
rotateX() ： 正值向上翻轉(zhuǎn)
rotateY() ： 正值向右翻轉(zhuǎn)
translateZ() ：正值向前泽台，負(fù)值向后
scaleZ() ：立體元素的厚度

3d寫法
    scale3d() : 三個(gè)值 x y z
    translate3d() : 三個(gè)值 x y z
    rotate3d() : 四個(gè)值 
    0|1（x軸是否添加旋轉(zhuǎn)角度），
    0|1（y軸是否添加旋轉(zhuǎn)角度）矾缓，
    0|1（z軸是否添加旋轉(zhuǎn)角度）怀酷，
    deg

perspective:離屏幕多遠(yuǎn)的距離去觀察元素，值越大幅度越小嗜闻。
perspective-origin：景深-基點(diǎn)位置蜕依，觀察元素的角度
transform-origin：x y z（z軸只能寫數(shù)值）
transform-style：3D空間
    flat(默認(rèn)值2d)、preserve-3d(3d,產(chǎn)生一個(gè)三維空間)
backface-visibility：背景隱藏
    hidden琉雳、visible(默認(rèn)值)

css3新增背景（圖）樣式

background-size：背景圖尺寸大小
    cover：覆蓋
    contain：包含
background-origin：背景圖的填充位置
    padding-box（默認(rèn)）
    border-box
    content-box
background-clip：背景圖的剪裁方式
    padding-box
    border-box（默認(rèn)）
    content-box
注：復(fù)合樣式中样眠，第一個(gè)是位置 第二個(gè)是裁切

漸變

linear-gradient:線性漸變 是值 需要添加到background-image屬性上
    point || angle
    color
    percentage
注：漸變的0deg是在元素的底部
radial-gradient：徑向漸變
    point
    color
    percentage

文字陰影

text-shadow
x
y
blur
color
多陰影
注：陰影的默認(rèn)顏色是字體顏色

盒子陰影

box-shadow
x
y
blur
spread
color
inset
多陰影
注：盒子陰影的默認(rèn)顏色是黑色的
注：默認(rèn)就是外陰影 如果設(shè)置outset不起作用「篮穑可選值只有inset

mask遮罩

url
repeat
x
y
w
h
多遮罩

注：mask目前是一個(gè)比較新的屬性 需要加瀏覽器前綴
注：默認(rèn)x y 都平鋪

倒影

box-reflect
    above
    below
    left
    right
    距離
    遮罩|漸變

注：box-reflect目前是一個(gè)比較新的屬性 需要加瀏覽器前綴
注：漸變只是針對(duì)透明度
注：通過transform:scale(-1) 也可以實(shí)現(xiàn)倒影效果

模糊

blur
    filter:blur()

計(jì)算

calc

分欄布局

column-count:分欄的個(gè)數(shù)
column-width:分欄的寬度
column-gap:分欄的間距
column-rule:芬蘭的邊線
column-span:合并分欄

注：分欄的寬度和分欄的個(gè)數(shù)不要一起設(shè)置

偽類和偽元素

• 在CSS2.1中對(duì)偽類和偽元素的區(qū)別比較模糊吹缔。CSS3中對(duì)這兩個(gè)概念做了相對(duì)比較清晰地解釋，并且語法上也做了比較明顯的區(qū)分锯茄。
• CSS3中規(guī)定偽類由一個(gè)冒號(hào)開始厢塘，然后為偽類的名稱；
• 偽元素由兩個(gè)冒號(hào)開始肌幽，然后為偽元素的名稱晚碾。

偽類：
    偽類本質(zhì)上是為了彌補(bǔ)常規(guī)的CSS選擇器的不足，以便獲取到更多的信息喂急。通常表示獲取不存在于DOM樹中的信息格嘁，或獲取不能被常規(guī)CSS選擇器獲取的信息。
        :hover
        :focus
        :empty
        ...

偽元素：
    偽元素本質(zhì)上是創(chuàng)建了一個(gè)有內(nèi)容的虛擬容器廊移。這個(gè)容器不包含任何DOM元素糕簿，但是可以包含內(nèi)容。另外狡孔，開發(fā)者還可以為偽元素添加樣式懂诗。
        ::selection
        ::first-line / first-letter
        ::before / after

CSS Hack

• CSS Hack 用來解決瀏覽器的兼容問題，為不同版本的瀏覽器制定編寫不同的CSS效果苗膝，使用每個(gè)瀏覽器單獨(dú)識(shí)別的樣式代碼殃恒，控制瀏覽器的顯示樣式。

Hack分類
    1、CSS屬性前綴法
        屬性前綴法是在CSS樣式屬性名前加上一些只有特定瀏覽器才能識(shí)別的hack前綴离唐，以達(dá)到預(yù)期的頁面展現(xiàn)效果病附。
    2、選擇器前綴法
        選擇器前綴法是針對(duì)一些頁面表現(xiàn)不一致或者需要特殊對(duì)待的瀏覽器亥鬓，在CSS選擇器前加上一些只有有些特定瀏覽器才能識(shí)別的前綴進(jìn)行hack
    3完沪、IE條件注釋法
        這種方式是IE瀏覽器專有的Hack方式，微軟官方推薦使用的hack方式 IE10以上已經(jīng)不支持注釋法

CSS屬性前綴法

選擇器前綴法

IE條件注釋法

注：
    let 小于等于
    gte 大于等于

IE低版本常見BUG

• 由于就瀏覽器在設(shè)計(jì)上有很多缺陷，導(dǎo)致一些BUG的產(chǎn)生偿短，所以針對(duì)這些問題需要作出兼容處理欣孤。

常見兼容問題

1、透明度
    opacity IE8及以下版本不識(shí)別
    filter:alpha(opacity=50)//取值是0-100
2昔逗、雙邊距
    IE6 瀏覽器在元素浮動(dòng)的狀態(tài)下 margin為兩倍邊距
    _display:inline;
3降传、最小高度
    IE6 最小高度是19px
    overflow:hidden
4、圖片邊框
    IE10以下 在img被a標(biāo)簽包裹的時(shí)候會(huì)出現(xiàn)邊框
    border:none;

漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)

• 漸進(jìn)增強(qiáng)：針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁面勾怒，保證最基本的功能婆排，然后再針對(duì)高級(jí)的瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)
• 優(yōu)雅降級(jí)：一開始就構(gòu)建完整的功能笔链，然后再針對(duì)低版本瀏覽器進(jìn)行兼容