筆記24css3第二天1授課

邊 邊框..................................................................................案例用css實(shí) 漸 線性漸變（gradient變化 徑向漸變(radial徑向 背 x值，y 2:“/1~4個(gè)參數(shù)用來設(shè)置縱軸半徑（1、2、3、4 text/shadow12box-shadow:5px5px27pxred,-5px-5px27px邊框border-image:url("images/border.png")27/20pxborder-image設(shè)置邊框的背景border-image-source:url(“”)設(shè)置邊框的地址//裁剪，如何去裁切，瀏覽器會(huì)自動(dòng)去裁剪.//邊框平鋪的樣式stretch拉升 設(shè)置的將會(huì)被“切割”成九宮格形式，然后進(jìn)行設(shè)置。如下圖1、roundrepeatround會(huì)自動(dòng)調(diào)整尺寸，完整顯示邊框repeatbackground-slice:34362727關(guān)于邊框重點(diǎn)理解9宮格的裁切及平鋪方式，實(shí)際開發(fā)中應(yīng)用不廣案例css CSS3當(dāng)中比較豐富多彩的一個(gè)特性，通過漸變我們可以實(shí)現(xiàn)許多炫麗的效果，有效的減少的使用數(shù)量，并且具有很強(qiáng)的適應(yīng)性和可擴(kuò)展（gradient變化Toright表示方向(left,top,right,left,也可以使用度數(shù)) )toright,red0%,red25%blue25%,bluegreen50%,greenpink75%,pink);background:linear-gradient(blacktransparenttransparentblackblacktransparentbackground-size:100px100px;animation:move1slinearinfinite;@keyframesmove{from{}to{background-position:100px}}(radial徑向background:radial-gradient(150pxatcenter,a、輻射范圍即圓半徑(半徑越大，漸變效果越大b(中心點(diǎn)的位置是以盒子自身background:radial-gradient(150pxatleftcenter,background:radial-gradient(150pxat0px0px,

width:300px;height:300px;margin:100pxauto;background:radial-gradient(250pxat0px0px,border-radius:}背景在CSS3中也得到很大程度的增強(qiáng)，比如背景尺寸、背景裁切區(qū)background-size:width,height可以設(shè)置背景的寬度以及高1、background-size設(shè)置背景的尺background-size:100%auto;當(dāng)寬度發(fā)送改變時(shí)，高度會(huì)有內(nèi)容溢出。background-size:autocover會(huì)自動(dòng)調(diào)整縮放比例，保證始終填充滿背景區(qū)域，溢出部整個(gè)背景完整顯示在背景區(qū)域contain會(huì)自動(dòng)調(diào)整縮放比例，保證始終完整顯示在背景區(qū)域。所謂的背景原點(diǎn)就是調(diào)整背景位置的一個(gè)參照點(diǎn).調(diào)整背景定位的參照原點(diǎn)border-box以邊框做為參考原點(diǎn)；padding-box以內(nèi)邊距做為參考原點(diǎn)；content-box以內(nèi)容區(qū)做為參考點(diǎn)；3、background-clipclip(裁切)border-box裁切邊框以內(nèi)為背景區(qū)域；padding-box裁切內(nèi)邊距以內(nèi)為背景區(qū)域；content-box裁切內(nèi)容區(qū)做為背景區(qū)域； 過渡 過渡是CSS3中具有性的特征之一，可以實(shí)現(xiàn)元素不同狀態(tài)間的平滑幀動(dòng)畫：牌切換.通過一幀一幀的畫面按照固定順序和速度。如電 transition-durationlinear(勻速)ease-in(加速)transition-delay設(shè)置過渡延時(shí)超過時(shí)間后執(zhí)行動(dòng)畫.2D轉(zhuǎn)換是CSS3中具有性的特征之一，可以實(shí)現(xiàn)元素的位移、旋轉(zhuǎn)、變Flashcss3transform(變形