CSS3主要知識點總結(jié)+HTML5新標(biāo)簽(圖文版)

1、總結(jié)+HTML5新增標(biāo)簽?zāi)夸洠?、CSS 屬性編寫順序2、CSS3屬性（內(nèi)核前綴）3、position相對/絕對定位4、overflow：scroll等的區(qū)別5、display屬性應(yīng)用6、盒模型計算方法和Bug7、CSS3新增加的結(jié)構(gòu)標(biāo)簽8、蒙版，變形，過渡，動畫等CSS3效果1、顯示屬性，自身屬性，文本屬性推薦樣式編寫順序    1 顯示屬性 ：display，list-style，position，float，clear 注意按照橫著的順序    2 自身屬性（合模型）：width，height，margin，padding，bo

2、rder，background（第3點）    3 背景：background    4 行高：line-height    5 文本屬性：color,font，text-decoration，text-align，vertical-align，white-space，content    6 其他 cursor/z-index/zoom    7 css3屬性：trandsform/transition/animation/box-shadow

3、/border-radius    8 鏈接的樣式請嚴(yán)格按照如下順序添加：      a:link->a:visited->a:hover->a:active(LoVeHAte)* 書寫的CSS代碼的時候請注意按照顯示 自身 文本的書寫順序來書寫！分享2014-4-1 HTML5上課筆記2、CSS3屬性（內(nèi)核前綴）Mozilla 內(nèi)核   css前綴-moz; WebKit  內(nèi)核   css前綴-webkit ;（谷歌已換用blink內(nèi)核）Opera &#

4、160; 內(nèi)核   css前綴 -o ;    （歐朋已換用blink內(nèi)核）Trident 內(nèi)核   css前綴 -ms ; CSS3新屬性：1）邊框 border-colors  相關(guān)屬性 border-top-colors  border-right-colors  border-bottom-colors  border-left-colors     border-image  ：stretch 拉伸方式來填充邊框背景圖 | r

5、epeat 平鋪 圖片碰到邊界時超出截斷 | round 平鋪，圖片會工具邊框的尺寸動態(tài)調(diào)整圖片大小直至剛 好鋪滿整個邊框   <style>    .wrap         height: 100px;        width: 100px;        border: 20px solid;        /*border-image: url('borde

6、r-image.png') 30 30 repeated;簡寫形式*/        border-image: url('border-image2.png') repeat;        border-image-slice:30 30;        text-align: center;      </style> border-radius  相關(guān)屬性  bo

7、rder-radius: 1-4 length | % / 1   border-radius數(shù)值為合模型的一半就變成圓 ，記?。翰皇窍鄬τ诤夏Ｐ偷膚idth（如：965x1611），    而是整個框才是     <style>          .wrap               

8、; height: 500px;               width: 500px;               border: 50px solid;             

9、0; border-radius: 250px;               </style>結(jié)果就顯示的不是正圓，所以border-radius: 300px; 才能顯示正圓，加上border的值                    '/'前面表示水平方向，后面表示垂直方向。每個方向都可以用14個

10、值，縮寫的規(guī)則遵循“左上開始， 順時針旋轉(zhuǎn)/ 只能寫一個 2）陰影1.文本陰影 text-shadow（不需要判斷瀏覽器）    text-shadow:2px 3px 2px #000;文字陰影的結(jié)構(gòu)是按照以下順序：X-偏移，Y-偏移，模糊，和顏色;text-shadow:-2px -3px 2px rgba(0, 118, 160, .25);設(shè)置為負(fù)值，X -偏移陰影轉(zhuǎn)移到左側(cè)。設(shè)置為負(fù)值偏移Y -轉(zhuǎn)移陰影頂端。顏色可以用RGBA值。text-shadow:0px 1px 0px #fff,0px -p1x 0px #000；文

11、字陰影的列表（以逗號分隔）,1px的頂部和底部1px的陰影。 text-shadow：水平偏移量 垂直偏移量 陰影模糊值 顏色，               水平偏移量 垂直偏移量 陰影模糊值 顏色；（多個陰影用，隔開）eg：.con2 p      font-size: 90px;     color:#fff;     text-shadow: -1px -1px 1px rgba(0,0,255,1),

12、0;                 -2px -2px 1px rgba(0,0,254,0.5),                  -6px -6px 10px rgba(0,0,252,0.2);2.盒陰影 box-shadow（不需要判斷瀏覽器）  盒陰影的使用語法結(jié)構(gòu)與文本陰影類似，如box-shadow: 5px 5px 5px rgba(255,15,255,0.5);  但是，盒陰影多了個

13、屬性：外延值，inset，  如box-shadow: 5px 5px 25px rgba(0,0,255,0.5) inset;                 補充個知識點：background:transparent; 等價 background:rgba(0,0,0,0);color: transparent; 等價 color:rgba(0,0,0,0);3）背景圖    1.

14、CSS3蒙版（需要判斷瀏覽器）       實現(xiàn)上面的效果，需要用到一張蒙版圖，注意這張圖中間不透明，跟平時PS設(shè)計蒙版不一樣，不透明的區(qū)域顯示出來的效果就變?yōu)橐男Ч?#160;                代碼：    .wrap img         height: 160px;         width: 160p

15、x;         background: #F00;         background: url(teacher_li.jpg);         -webkit-mask-image:url(pro_pho_show_pic.png);         -webkit-mask-position:50% 50%;         -web

16、kit-mask-repeat:no-repeat;    縮寫：-webkit-mask:url(pro_pho_show_pic.png) 50% 50%  no-repeat;  -webkit-mask-clip 蒙版裁剪位置  -webkit-mask-origin 蒙版原點位置  蒙版是能夠應(yīng)用漸變的。但是因為瀏覽器兼容的問題比較嚴(yán)重，通常不使用漸變作為蒙版的屬性值，  而是使用有“透明度梯度”的圖片替代掉漸變，產(chǎn)生同樣的功能。  2. 多重背景 background-image:

17、url(teacher_li.jpg),url(teacher_li.jpg);   3. CSS3漸變  css3實現(xiàn)背景顏色線性漸變  div    width:500px;    border:1px solid #FA0;    background:-webkit-linear-gradient(left,#f00,#ff0 25%,#0ff 55%,#00f 70%,#f00);     /*橫向漸變*/    backgr

18、ound:-webkit-gradient-gradient(left,#f00,#ff0 25%,#0ff 55%,#00f 70%,#f00); /*縱向漸變*/    -webkit-background-clip:text; /*只有webkit內(nèi)核支持text的剪切模式*/    color:transparent;   4. CSS3倒影 -webkit-box-reflect     1.方向 -webkit-box-reflect:  below/a

19、bove/left/right     2.距離     3.透明度    -webkit-box-reflect: below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 20%,    rgba(0,0,0,0.6) 100%)4）CSS3變形transform   二，三維變形的變形方式：四種方法   旋轉(zhuǎn)縮放平移扭曲旋轉(zhuǎn)（1個值）縮放（1個值）平移（2個值）扭曲（2個值）rotaterot

20、ate（30deg） scale可以取值正，負(fù)，小數(shù)translatetranslate（x,y）   針對2D平面平移skew  rotateX(30deg);  rotateY(30deg);  rotateZ(30deg);   縮放的值，X為負(fù)時，字體先沿Y軸翻轉(zhuǎn)再縮放   縮放的值，Y為負(fù)時，字體先沿X軸翻轉(zhuǎn)再縮放               translateX   translateY  sk

21、ew(30deg,15deg);  skewX(30deg);  skewY(15deg);旋轉(zhuǎn)：-webkit-transform: rotate(120deg);平移：-webkit-transform: translate(20px, 10px);  -moz-transform: translateX(20px);縮放：-webkit-transform: scale(1.1,0.5); X方向縮放1.1倍，Y方向縮放0.5倍 scale(1,1);    scale(-1,1);   scale(1,-1); &#

22、160;scale(-1,-1);等價scale(-1);                                                                       

23、 transform：變形種類；的名稱（對應(yīng)的屬性值），多個種類之間使用空格分隔。一個（）中的屬性值之間用逗號分隔。 二維平面的旋轉(zhuǎn)，旋轉(zhuǎn)圍繞點進(jìn)行，而旋轉(zhuǎn)正方向默認(rèn)為順時針方向 默認(rèn)的旋轉(zhuǎn)中心就是這個塊的正中心，可以通過transform-origin去改變旋轉(zhuǎn)中心，通過left top、數(shù)值、百分比改變旋轉(zhuǎn)中心 scale(<number>, <number>);表示使元素在X軸和Y軸同時縮放。<number>表示縮放倍數(shù)，可以是正數(shù)，負(fù)數(shù)和小數(shù)。負(fù)數(shù)是先翻轉(zhuǎn)元素然后再縮放。包含兩個參數(shù)，如果缺少第二個參數(shù)，那么第二個參數(shù)的值等于第一個參數(shù)。&

24、#160;  scaleX(<number>):表示只在X軸(水平方向)縮放元素。   scaleY(<number>):表示只在Y軸(垂直方向)縮放元素。   scaleZ(<number>):表示只在Z軸縮放元素。前提是元素本身或者元素的父元素設(shè)定了透視值（perspective：100;）5.視角：-webkit-persepective：0；      0沒設(shè)置 （值） 800px;  通常在body元素下  CSS3 perspective屬性：&#

25、160;目前瀏覽器都不支持 perspective 屬性。 Chrome 和 Safari 支持替代的 -webkit-perspective 屬性。6. backface-visibility: visible | hidden;  定義當(dāng)元素不面向屏幕時是否可見?？捎迷趽淇伺菩D(zhuǎn)上。 【W(wǎng)3CSchool資料】matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)定義3D轉(zhuǎn)換，使用16個值的4x4矩陣。translate3d(x,y,z)定義3D轉(zhuǎn)化。translateX(x)定義3D轉(zhuǎn)化，僅使用用于X軸的值。trans

26、lateY(y)定義3D轉(zhuǎn)化，僅使用用于Y軸的值。translateZ(z)定義3D轉(zhuǎn)化，僅使用用于Z軸的值。scale3d(x,y,z)定義3D縮放轉(zhuǎn)換。scaleX(x)定義3D縮放轉(zhuǎn)換，通過給定一個X軸的值。scaleY(y)定義3D縮放轉(zhuǎn)換，通過給定一個Y軸的值。scaleZ(z)定義3D縮放轉(zhuǎn)換，通過給定一個Z軸的值。rotate3d(x,y,z,angle)定義3D旋轉(zhuǎn)。rotateX(angle)定義沿X軸的3D旋轉(zhuǎn)。rotateY(angle)定義沿Y軸的3D旋轉(zhuǎn)。rotateZ(angle)定義沿Z軸的3D旋轉(zhuǎn)。perspective(n)定義3D轉(zhuǎn)換元素的透視視圖。

27、0;7）CSS3過渡 trabsition參與過渡的屬性、過渡時間、過渡方式（動畫類型） 延遲時間 【需要寫前綴】一般情況下，transition添加在基本效果上，而不是hover效果中。css原狀態(tài)和hover狀態(tài)設(shè)置為兩種不同的樣式，然后通過CSS3過渡進(jìn)行漸變處理padding、color所有瀏覽器都支持漸變transition 屬性是一個簡寫屬性，用于設(shè)置四個過渡屬性：· transition-property  哪個屬性實現(xiàn)過渡如：width· transition-duration  完成過渡效果需要多少秒/毫秒·

28、; transition-timing-function  速度效果的運動曲線，如linear 、ase-in 、ease 、 ease-out 、ease-in-out 、 cube-bezier（貝塞爾曲線） · transition-delay  規(guī)定過渡開始前等待幾秒簡寫：transition：width 2s ease； 8）CSS3動畫 animationanimation基本參數(shù)與transition完全相同，第一個參數(shù)表示的是調(diào)用哪個動畫 infinite 表示無限循環(huán).wrap   &#

29、160;height:100px;   margin:10px;   -webkit-animation:colorChange 10s linear 1.5s infinite;-webkit-keyframes colorChange       0% background:#f00;      10% background:#ff0;animation屬性值：keyframes規(guī)定動畫。animation所有動畫屬性的簡寫屬性，除了animation-play-state 屬性。

30、animation-name規(guī)定 keyframes 動畫的名稱。animation-duration規(guī)定動畫完成一個周期所花費的秒或毫秒。默認(rèn)是 0。animation-timing-function規(guī)定動畫的速度曲線。默認(rèn)是 "ease"。 規(guī)定動畫何時開始。默認(rèn)是 0。animation-iteration-count規(guī)定動畫被播放的次數(shù)。默認(rèn)是 1。animation-direction規(guī)定動畫是否在下一周期逆向地播放。默認(rèn)是 "normal" 。逆向alternateanimation-play-state規(guī)定動畫是否正在運行或暫停。

31、默認(rèn)是 "running"，暫停時pauseanimation-fill-mode規(guī)定對象動畫時間之外的狀態(tài)。  CSS3過渡與動畫的區(qū)別： transition  animation     1、animation多兩個參數(shù)，循環(huán)和動畫的方式2、transition不能自行觸發(fā)，通過hover等動作或結(jié)合JS進(jìn)行觸發(fā)。anmiation可以自行運行。3、transition可控性較弱，只能指定起始狀態(tài)和結(jié)束狀態(tài)，而animation可以定義多個關(guān)鍵幀。4、動畫在運行結(jié)束之后，需要回到初始狀態(tài)5、transition的作用，可以用一句話來概括，平滑改變CSS樣式9.HTML5新增加標(biāo)簽：優(yōu)勢： 語義性好 少類名  有利于SEO  代碼少       文檔易讀 、搜索引擎能夠更好的理解頁面中的內(nèi)容、作為開發(fā)者，能夠更快更準(zhǔn)確的搜