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，border，background（第3點） 3 背景：background

2、 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/border-radius 8 鏈接的樣式請嚴(yán)格按照如下順序添加： a:link-a:visited-a:hover-a:active(LoVeHAte)* 書寫的CSS代碼的時候請注意按照顯示 自身 文本的書寫順序來書寫！分享2014-4-1 HT

3、ML5上課筆記2、CSS3屬性（內(nèi)核前綴）Mozilla 內(nèi)核 css前綴-moz;WebKit 內(nèi)核 css前綴-webkit ;（谷歌已換用blink內(nèi)核）Opera 內(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 拉伸方式來填充邊框背景圖|repeat 平鋪 圖片碰到邊界時超出截

4、斷 |round 平鋪，圖片會工具邊框的尺寸動態(tài)調(diào)整圖片大小直至剛 好鋪滿整個邊框 .wrap height: 100px; width: 100px; border: 20px solid; /*border-image: url(border-image.png) 30 30 repeated;簡寫形式*/ border-image: url(border-image2.png) repeat; border-image-slice:30 30; text-align: center; border-radius 相關(guān)屬性border-radius: 1-4 length | % / 1

5、border-radius數(shù)值為合模型的一半就變成圓 ，記?。翰皇窍鄬τ诤夏Ｐ偷膚idth（如：965x1611）， 而是整個框才是 .wrap height: 500px; width: 500px; border: 50px solid; border-radius:250px; 結(jié)果就顯示的不是正圓，所以border-radius:300px; 才能顯示正圓，加上border的值 /前面表示水平方向，后面表示垂直方向。每個方向都可以用14個值，縮寫的規(guī)則遵循“左上開始，順時針旋轉(zhuǎn)/只能寫一個2）陰影1.文本陰影 text-shadow（不需要判斷瀏覽器） text-shadow:2px

6、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；文字陰影的列表（以逗號分隔）,1px的頂部和底部1px的陰影。text-shadow：水平偏移量 垂直偏移量 陰影模糊值 顏色， 水平偏移量 垂直偏移量 陰影模糊值 顏色；（多個陰影用，隔開）eg：.con2 p font-

7、size: 90px; color:#fff; text-shadow: -1px -1px 1px rgba(0,0,255,1), -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); 但是，盒陰影多了個屬性：外延值，inset，如box-shadow: 5px 5px 25px rgba(0,0,255,0.5) inset; 補

8、充個知識點：background:transparent; 等價background:rgba(0,0,0,0);color:transparent;等價color:rgba(0,0,0,0);3）背景圖 1.CSS3蒙版（需要判斷瀏覽器） 實現(xiàn)上面的效果，需要用到一張蒙版圖，注意這張圖中間不透明，跟平時PS設(shè)計蒙版不一樣，不透明的區(qū)域顯示出來的效果就變?yōu)橐男Ч?代碼： .wrap img height: 160px; width: 160px; background: #F00; background: url(teacher_li.jpg); -webkit-mask-image:url

9、(pro_pho_show_pic.png); -webkit-mask-position:50% 50%; -webkit-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: ur

10、l(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); /*橫向漸變*/ background:-webkit-gradient-gradient(left,#f00,#ff0 25%,#0ff 55%,#00f 70%,#f00); /*縱向漸變*/ -webkit-background-c

11、lip:text;/*只有webkit內(nèi)核支持text的剪切模式*/ color:transparent; 4. CSS3倒影-webkit-box-reflect 1.方向 -webkit-box-reflect: below/above/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個值）平

12、移（2個值）扭曲（2個值）rotaterotate（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 skew(30deg,15deg); skewX(30deg); skewY(15deg);旋轉(zhuǎn)：-webkit-transform: rotate(120deg);平移：-webkit-transfor

13、m: 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); scale(-1,-1);等價scale(-1); transform：變形種類；的名稱（對應(yīng)的屬性值），多個種類之間使用空格分隔。一個（）中的屬性值之間用逗號分隔。 二維平面的旋轉(zhuǎn)，旋轉(zhuǎn)圍繞點進(jìn)行，而旋轉(zhuǎn)正方向默認(rèn)為順時針方向 默認(rèn)的旋轉(zhuǎn)中心就是這個塊的正中心，可以通過transform-

14、origin去改變旋轉(zhuǎn)中心，通過left top、數(shù)值、百分比改變旋轉(zhuǎn)中心scale(, );表示使元素在X軸和Y軸同時縮放。表示縮放倍數(shù)，可以是正數(shù)，負(fù)數(shù)和小數(shù)。負(fù)數(shù)是先翻轉(zhuǎn)元素然后再縮放。包含兩個參數(shù)，如果缺少第二個參數(shù)，那么第二個參數(shù)的值等于第一個參數(shù)。 scaleX():表示只在X軸(水平方向)縮放元素。 scaleY():表示只在Y軸(垂直方向)縮放元素。 scaleZ():表示只在Z軸縮放元素。前提是元素本身或者元素的父元素設(shè)定了透視值（perspective：100;）5.視角：-webkit-persepective：0； 0沒設(shè)置 （值） 800px; 通常在body元素下

15、CSS3 perspective屬性：目前瀏覽器都不支持 perspective 屬性。Chrome 和 Safari 支持替代的 -webkit-perspective 屬性。6. backface-visibility: visible | hidden; 定義當(dāng)元素不面向屏幕時是否可見?？捎迷趽淇伺菩D(zhuǎn)上?！網(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軸的值。translateY(y)定

16、義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)換元素的透視視圖。7）CSS3過渡trabs

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

18、ase 、 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 height:100px; margin:10px; -webkit-animation:colorChange 10s linear 1.5s infinite;-webkit-keyframes colorChange 0%

19、 background:#f00; 10% background:#ff0;animation屬性值：keyframes規(guī)定動畫。animation所有動畫屬性的簡寫屬性，除了animation-play-state 屬性。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-d

20、irection規(guī)定動畫是否在下一周期逆向地播放。默認(rèn)是 normal 。逆向alternateanimation-play-state規(guī)定動畫是否正在運行或暫停。默認(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é)束之