盒子模型新增屬性

《物聯(lián)網(wǎng)Web前端開發(fā)基礎(chǔ)》課程

盒子模型新增屬性【任務(wù)3-3】盒子模型新增屬性需求分析什么是HTML？為了豐富網(wǎng)頁的樣式功能，去除一些冗余的樣式代碼，CSS3中添加了一些新的盒子模型屬性，例如顏色透明、圓角、陰影、漸變等。下面將詳細介紹這些全新的的CSS樣式屬性。【任務(wù)3-3】盒子模型新增屬性知識儲備—顏色透明通過引入RGBA模式和opacity屬性，對背景與圖片設(shè)置不透明度rgba(r,g,b,alpha);例如：p{background-color:rgba(255,0,0,0.5);}【任務(wù)3-3】盒子模型新增屬性知識儲備—顏色透明通過引入RGBA模式和opacity屬性，對背景與圖片設(shè)置不透明度opacity：opacityValue;opacity屬性用于定義標簽的不透明度，參數(shù)opacityValue表示不透明度的值，它是一個介于0~1之間的浮點數(shù)值。其中，0表示完全透明，1表示完全不透明，而0.5則表示半透明?！救蝿?wù)3-3】盒子模型新增屬性知識儲備—圓角border-radius:水平半徑參數(shù)1水平半徑參數(shù)2水平半徑參數(shù)3水平半徑參數(shù)4/垂直半徑參數(shù)1垂直半徑參數(shù)2垂直半徑參數(shù)3垂直半徑參數(shù)4;需要注意的是，當應(yīng)用值復制原則設(shè)置圓角邊框時，如果“垂直半徑參數(shù)”省略，則會默認等于“水平半徑參數(shù)”的參數(shù)值。此時圓角的水平半徑和垂直半徑相等。【任務(wù)3-3】盒子模型新增屬性知識儲備—圓角示例【任務(wù)3-3】盒子模型新增屬性知識儲備—陰影box-shadow屬性可以添加陰影，改變陰影的投射方向以及添加多重陰影效果。示例：

box-shadow:5px5px10px2px#999inset,-5px-5px10px2px#333inset;【任務(wù)3-3】盒子模型新增屬性知識儲備—陰影參數(shù)值描述h-shadow表示水平陰影的位置，可以為負值（必選屬性）v-shadow表示垂直陰影的位置，可以為負值（必選屬性）blur陰影模糊半徑（可選屬性）spread陰影擴展半徑，不能為負值（可選屬性）color陰影顏色（可選屬性）outset/inset默認為外陰影/內(nèi)陰影（可選屬性）【任務(wù)3-3】盒子模型新增屬性知識儲備—漸變1.線性漸變background-image:linear-gradient(漸變角度,顏色值1,顏色值2...,顏色值n);linear-gradient用于定義漸變方式為線性漸變，括號內(nèi)用于設(shè)定漸變角度和顏色值。在線性漸變過程中，起始顏色會沿著一條直線按順序過渡到結(jié)束顏色。運用CSS3中的“background-image:linear-gradient（參數(shù)值）;”樣式可以實現(xiàn)線性漸變效果?！救蝿?wù)3-3】盒子模型新增屬性知識儲備—漸變1.線性漸變在線性漸變過程中，起始顏色會沿著一條直線按順序過渡到結(jié)束顏色。運用CSS3中的“background-image:linear-gradient（參數(shù)值）;”樣式可以實現(xiàn)線性漸變效果。漸變角度漸變角度指水平線和漸變線之間的夾角，可以是以deg為單位的角度數(shù)值或關(guān)鍵詞。顏色值顏色值用于設(shè)置漸變顏色，其中“顏色值1”表示起始顏色，“顏色值n”表示結(jié)束顏色，起始顏色和結(jié)束顏色之間可以添加多個顏色值，各顏色值之間用“,”隔開?！救蝿?wù)3-3】盒子模型新增屬性知識儲備—漸變2.徑向漸變徑向漸變同樣是網(wǎng)頁中一種常用的漸變，在徑向漸變過程中，起始顏色會從一個中心點開始，按照橢圓或圓形形狀進行擴張漸變。運用CSS3中的“background-image:radial-gradient（參數(shù)值）;”樣式可以實現(xiàn)徑向漸變效果。background-image:radial-gradient(漸變形狀圓心位置,顏色值1,顏色值2...,顏色值n);radial-gradient用于定義漸變的方式為徑向漸變，括號內(nèi)的參數(shù)值用于設(shè)定漸變形狀、圓心位置和顏色值?！救蝿?wù)3-3】盒子模型新增屬性知識儲備—漸變2.徑向漸變漸變形狀漸變形狀用來定義徑向漸變的形狀，其取值即可以是定義水平和垂直半徑的像素值或百分比，也可以是相應(yīng)的關(guān)鍵詞。圓心位置圓心位置用于確定元素漸變的中心位置，使用“at”加上關(guān)鍵詞或參數(shù)值來定義徑向漸變的中心位置。顏色值“顏色值1”表示起始顏色，“顏色值n”表示結(jié)束顏色，起始顏色和結(jié)束顏色之間可以添加多個顏色值，各顏色值之間用“,”隔開。【任務(wù)3-3】盒子模型新增屬性知識儲備—漸變3.重復漸變重復線性漸變重復徑向漸變重復徑向漸變在CSS3中，通過“background-image:repeating-linear-gradient（參數(shù)值）;”樣式可以實現(xiàn)重復線性漸變的效果。background-image:repeating-linear-gradient(漸變角度,顏色值1,顏色值2...,顏色值n);【任務(wù)3-3】盒子模型新增屬性知識儲備—漸變重復線性漸變重復徑向漸變重復徑向漸變重復線性漸變在CSS3中，通過“background-image:repeating-radial-gradient（參數(shù)值）;”樣式可以實現(xiàn)重復線性漸變的效果。background-image:repeating-radial-gradient(漸變形狀圓心位置,顏色值1,顏色值2...,顏色值n);【任務(wù)3-3】盒子模型新增屬性知識拓展—過渡CSS3提供了強大的過渡屬性，它可以在不使用Flash動畫或者JavaScript腳本的情況下，為元素從一種樣式轉(zhuǎn)變?yōu)榱硪环N樣式時添加效果，例如漸顯、漸弱、動畫快慢等?！救蝿?wù)3-3】盒子模型新增屬性知識拓展—過渡transition-property

屬性用于指定應(yīng)用過渡效果的CSS屬性的名稱?；菊Z法格式transition-property:none|all|property;屬性值描述none沒有屬性會獲得過渡效果。all所有屬性都將獲得過渡效果。property定義應(yīng)用過渡效果的CSS屬性名稱，多個名稱之間以逗號分隔。【任務(wù)3-3】盒子模型新增屬性知識拓展—過渡transition-duration屬性用于定義過渡效果花費的時間，默認值為0，常用單位是秒（s）或者毫秒（ms）?；菊Z法格式transition-duration:time;【任務(wù)3-3】盒子模型新增屬性知識拓展—過渡transition-timing-function屬性規(guī)定過渡效果的速度曲線，默認值為“ease“。基本語法格式transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);【任務(wù)3-3】盒子模型新增屬性知識拓展—過渡transition-timing-function屬性的取值屬性值描述linear指定以相同速度開始至結(jié)束的過渡效果，等同于cubic-bezier(0,0,1,1)）。ease指定以慢速開始，然后加快，最后慢慢結(jié)束的過渡效果，等同于cubic-bezier(0.25,0.1,0.25,1）。ease-in指定以慢速開始，然后逐漸加快（淡入效果）的過渡效果，等同于cubic-bezier(0.42,0,1,1）。ease-out指定以慢速結(jié)束（淡出效果）的過渡效果，等同于cubic-bezier(0,0,0.58,1）。ease-in-out指定以慢速開始和結(jié)束的過渡效果，等同于cubic-bezier(0.42,0,0.58,1）。cubic-bezier(n,n,n,n)定義用于加速或者減速的貝塞爾曲線的形狀，它們的值在0~1之間?！救蝿?wù)3-3】盒子模型新增屬性知識拓展—過渡transition-delay屬性規(guī)定過渡效果何時開始，默認值為0，常用單位是秒（s）或者毫秒（ms）?；菊Z法格式transition-delay:time;正數(shù):過渡動作會延遲觸發(fā)。負數(shù)：過渡動作會從該時間點開始，之前的動作被截斷。【任務(wù)3-3】盒子模型新增屬性知識拓展—過渡transition屬性是一個復合屬性，用于在一個屬性中設(shè)置transition-property、transition-duration、transition-timing-function、transition-delay四個過渡屬性?；菊Z法格式transition：propertydurationtiming-functiondelay;使用transition屬性設(shè)置多個過渡效果時，它的各個參數(shù)必須按照順序進行定義，不能顛倒。例如：transition:border-radius5sease-in-out2s;【任務(wù)3-3】盒子模型新增屬性知識拓展—過渡無論是單個屬性還是簡寫屬性，使用時都可以實現(xiàn)多個過渡效果。如果使用transition簡寫屬性設(shè)置多種過渡效果，需要為每個過渡屬性集中指定所有的值，并且使用逗號進行分隔?！救蝿?wù)3-3】盒子模型新增屬性知識拓展—變形CSS3的變形（transform）屬性可以讓元素在一個坐標系統(tǒng)中變形。基本語法格式transform：none|transform-functions;transform屬性的默認值為none，適用于內(nèi)聯(lián)元素和塊元素，表示不進行變形。transform-function用于設(shè)置變形函數(shù)，可以是一個或多個變形函數(shù)列表。【任務(wù)3-3】盒子模型新增屬性知識拓展—變形transform-function函數(shù)matrix（）定義矩形變換，即基于X和Y坐標重新定位元素的位置。translate（）移動元素對象，即基于X和Y坐標重新定位元素。scale（）縮放元素對象，可以使任意元素對象尺寸發(fā)生變化，取值包括正數(shù)、負數(shù)和小數(shù)。rotate（）旋轉(zhuǎn)元素對象，取值為一個度數(shù)值。skew（）傾斜元素對象，取值為一個度數(shù)值?！救蝿?wù)3-3】盒子模型新增屬性知識拓展—變形平移使用translate（）方法能夠重新定義元素的坐標，實現(xiàn)平移的效果?；菊Z法格式transform:translate（x-value,y-value）;x-value指元素在水平方向上移動的距離，y-value指元素在垂直方向上移動的距離。如果省略了第二個參數(shù)，則取默認值0。當值為負數(shù)時，表示反方向移動元素。2D變形【任務(wù)3-3】盒子模型新增屬性知識拓展—變形2D變形平移使用translate（）方法能夠重新定義元素的坐標，實現(xiàn)平移的效果。translate（）方法平移示意圖基點【任務(wù)3-3】盒子模型新增屬性知識拓展—變形2D變形縮放scale()方法用于縮放元素大小，該函數(shù)包含兩個參數(shù)值，分別用來定義寬度和高度的縮放比例?；菊Z法格式transform:scale(x-axis,y-axis);x-axis和y-axis參數(shù)值可以是正數(shù)、負數(shù)和小數(shù)。正數(shù)值表示基于指定的寬度和高度放大元素。負數(shù)值不會縮小元素，而是反轉(zhuǎn)元素（如文字被反轉(zhuǎn)），然后再縮放元素。如果第二個參數(shù)省略，則第二個參數(shù)等于第一個參數(shù)值。【任務(wù)3-3】盒子模型新增屬性知識拓展—變形2D變形縮放scale()方法用于縮放元素大小，該函數(shù)包含兩個參數(shù)值，分別用來定義寬度和高度的縮放比例。scale()方法縮放示意圖【任務(wù)3-3】盒子模型新增屬性知識拓展—變形2D變形傾斜skew()方法能夠讓元素傾斜顯示，該函數(shù)包含兩個參數(shù)值，分別用來定義X軸和Y軸坐標傾斜的角度?；菊Z法格式transform:skew(x-angle,y-angle);參數(shù)x-angle和y-angle表示角度值，第一個參數(shù)表示相對于X軸進行傾斜，第二個參數(shù)表示相對于Y軸進行傾斜，如果省略了第二個參數(shù)，則取默認值0?！救蝿?wù)3-3】盒子模型新增屬性知識拓展—變形2D變形傾斜skew()方法能夠讓元素傾斜顯示，該函數(shù)包含兩個參數(shù)值，分別用來定義X軸和Y軸坐標傾斜的角度。skew()方法傾斜示意圖【任務(wù)3-3】盒子模型新增屬性知識拓展—變形2D變形旋轉(zhuǎn)rotate()方法能夠旋轉(zhuǎn)指定的元素對象，主要在二維空間內(nèi)進行操作。該方法中的參數(shù)允許傳入負值，這時元素將逆時針旋轉(zhuǎn)?；菊Z法格式transform:rotate(angle);參數(shù)angle表示要旋轉(zhuǎn)的角度值。如果角度為正數(shù)值，則按照順時針進行旋轉(zhuǎn)，否則，按照逆時針旋轉(zhuǎn)?！救蝿?wù)3-3】盒子模型新增屬性知識拓展—變形2D變形旋轉(zhuǎn)rotate()方法能夠旋轉(zhuǎn)指定的元素對象，主要在二維空間內(nèi)進行操作。該方法中的參數(shù)允許傳入負值，這時元素將逆時針旋轉(zhuǎn)。rotate()方法旋轉(zhuǎn)示意圖【任務(wù)3-3】盒子模型新增屬性知識拓展—變形2D變形中心點變形操作都是以元素的中心點為基準進行的，如果需要改變這個中心點，可以使用transform-origin屬性?；菊Z法格式transform-origin:x-axisy-axisz-axis;【任務(wù)3-3】盒子模型新增屬性知識拓展—變形2D變形transform-origin屬性包含三個參數(shù)，其默認值分別為50%50%0，各參數(shù)的具體含義參數(shù)描述x-axis定義視圖被置于X軸的何處。可能的值有：leftcenterrightlength%y-axis定義視圖被置于Y軸的何處?？赡艿闹涤校簍opcenterbottomlength%z-axis定義視圖被置于Z軸的何處?？赡艿闹涤校簂ength【任務(wù)3-3】盒子模型新增屬性知識拓展—變形3D變形rotateX()方法rotateX()函數(shù)用于指定元素圍繞X軸旋轉(zhuǎn)?；菊Z法格式transform:rotateX(a);參數(shù)a用于定義旋轉(zhuǎn)的角度值，單位為deg，其值可以是正數(shù)也可以是負數(shù)。如果值為正，元素將圍繞X軸順時針旋轉(zhuǎn)；反之，如果值為負，元素圍繞X軸逆時針旋轉(zhuǎn)。【任務(wù)3-3】盒子模型新增屬性知識拓展—變形3D變形rotateY()方法rotateY()函數(shù)指定一個元素圍繞Y軸旋轉(zhuǎn)基本語法格式transform:rotateY(a);參數(shù)a與rotateX(a)中的a含義相同，用于定義旋轉(zhuǎn)的角度。如果值為正，元素圍繞Y軸順時針旋轉(zhuǎn)；反之，如果值為負，元素圍繞Y軸逆時針旋轉(zhuǎn)?！救蝿?wù)3-3】盒子模型新增屬性知識拓展—變形3D變形rotate3D（）方法在三維空間里，除了rotateX()、rotateY()和rotateZ()函數(shù)可以讓元素在三維空間中旋轉(zhuǎn)之外，還有一個rotate3d()函數(shù)。基本語法格式rotate3d(x,y,z,angle);x、y、z可以取值0或1，當要沿著某一軸轉(zhuǎn)動，就將該軸的值設(shè)置為1，否則設(shè)置為0。Angle為要旋轉(zhuǎn)的角度?！救蝿?wù)3-3】盒子模型新增屬性知識拓展—變形3D變形perspective屬性perspective屬性可以簡單的理解為視距，主要用于呈現(xiàn)良好的3D透視效果。例如我們前面設(shè)置的3D旋轉(zhuǎn)果并不明顯，就是沒有設(shè)置perspective的原因?；菊Z法格式perspective:參數(shù)值;perspective屬性參數(shù)值可以為none或者數(shù)值（一般為像素），其透視效果由參數(shù)值決定，參數(shù)值越小，透視效果越突出。【任務(wù)3-3】盒子模型新增屬性知識拓展—變形3D變形在CSS3中包含很多轉(zhuǎn)換的屬性，通過這些屬性可以設(shè)置不同的轉(zhuǎn)換效果。屬性名稱描述屬性值transform-style用于保存元素的3D空間flat：子元素將不保留其3D位置。（默認屬性）preserve-3d子元素將保留其3D位置。backface-visibility定義元素在不面對屏幕時是否可見visible：背面是可見的。hidden：背面是不可見的?！救蝿?wù)3-3】盒子模型新增屬性知識拓展—變形3D變形CSS3中還包含很多轉(zhuǎn)換的方法，運用這些方法可以實現(xiàn)不同的轉(zhuǎn)換效果。方法名稱描述translate3d(x,y,z)定義3D位移translateX(x)定義3D位移，僅使用用于X軸的值translateY(y)定義3D位移，僅使用用于Y軸的值translateZ(z)定義3D位移，僅使用用于Z軸的值scale3d(x,y,z)定義3D縮放scaleX(x)定義3D縮放，通過給定一個X軸的值scaleY(y)定義3D縮放，通過給定一個Y軸的值scaleZ(z)定義3D縮放，通過給定一個Z軸的值【任務(wù)3-3】盒子模型新增屬性知識拓展—動畫在CSS3中，@keyframes規(guī)則用于創(chuàng)建動畫?；菊Z法格式@keyframesanimationname{keyframes-selector{css-styles;}}【任務(wù)3-3】盒子模型新增屬性知識拓展—動畫animation-name屬性用于定義要應(yīng)用的動畫名稱?；菊Z法格式animation-name:keyframename|none;animation-name屬性初始值為none，適用于所有塊元素和行內(nèi)元素。keyframename參數(shù)用于規(guī)定需要綁定到選擇器的keyframe的名稱，如果值為none，則表示不應(yīng)用任何動畫，通常用于覆蓋或者取消動畫。【任務(wù)3-3】盒子模型新增屬性知識拓展—動畫animation-duration屬性用于定義整個動畫效果完成所需要的時間，以秒或毫秒計?；菊Z法格式animation-duration:time;animation-duration屬性初始值為0，適用于所有塊元素和行內(nèi)元素。time參數(shù)是以秒（s）或者毫秒（ms）為單位的時間，默認值為0，表示沒有任何動畫效果。當值為負數(shù)時，則被視為0?！救蝿?wù)3-3】盒子模型新增屬性知識拓展—動畫animation-timing-function用來規(guī)定動畫的速度曲線，可以定義使用哪種方式來執(zhí)行動畫效果?；菊Z法格式animation-timing-function:value;animation-timing-function包括linear、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n)等常用屬性值?！救蝿?wù)3-3】盒子模型新增屬性知識拓展—動畫animation-timing-function的常用屬性值屬性值描述linear動畫從頭到尾的速度是相同的。ease默認。動畫以低速開始，然后加快，在結(jié)束前變慢。ease-in動畫以低速開始。ease-out動畫以低速結(jié)束。ease-in-out動畫以低速開始和結(jié)束。cubic-bezier(n,n,n,n)在cubic-bezier函數(shù)中自己的值?？赡艿闹凳菑?到1的數(shù)值?！救蝿?wù)3-3】盒子模型新增屬性知識拓展—動畫animation-delay屬性用于定義執(zhí)行動畫