HTML第6章-CSS3新增屬性課件

1、CSS3新增屬性 HTML5課程目錄Transition過渡Border6Filter124Animation 動畫Transform 2D/3D3Flex57textBorder向 div 元素添加圓角邊框：border-radiusborder-bottom-left-radiusborder-bottom-right-radiusborder-top-left-radiusborder-top-right-radius舉例（border-radius）div border:2px solid; border-radius:25px; box-shadow為div 元素添加一個或多個陰影的

2、邊框：box-shadow 舉例（box-shadow）div box-shadow: 10px 10px 5px #888888; 值描述h-shadow必需。水平陰影的位置。允許負值。v-shadow必需。垂直陰影的位置。允許負值。blur可選。模糊距離。border-image將圖片規(guī)定為包圍 div 元素的邊框：border-image-outset border-image-repeatborder-image-slice border-image-sourceborder-image-width舉例（border-image）border-image將圖片規(guī)定為包圍 div 元素的

3、邊框：border-image-source 用在邊框的圖片的路徑border-image-slice 圖片邊框向內(nèi)偏移。border-image-width 圖片邊框的寬度。border-image-outset 邊框圖像區(qū)域超出邊框的量。border-image-repeat 圖像邊框是否應(yīng)平鋪(repeated)、鋪滿(rounded)或拉伸(stretched)。 border-image舉例（border-image）div -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */ -o-border-image

4、:url(border.png) 30 30 round; /* Opera */ border-image:url(border.png) 30 30 round; Text文本溢出處理：white-space：規(guī)定段落中的文本不進行換行舉例（white-space）p white-space: nowrap; 值描述normal默認?？瞻讜粸g覽器忽略。pre空白會被瀏覽器保留。其行為方式類似 HTML 中的 標簽。nowrap文本不會換行，文本會在在同一行上繼續(xù)，直到遇到 標簽為止。pre-wrap保留空白符序列，但是正常地進行換行。pre-line合并空白符序列，但是保留換行符。Tex

5、t文本溢出處理：text-overflow:當(dāng)文本溢出包含元素時發(fā)生的事情舉例（text-overflow）div.testtext-overflow:ellipsis;值描述clip修剪文本。ellipsis顯示省略符號來代表被修剪的文本。string使用給定的字符串來代表被修剪的文本。text-shadow文本陰影：text-shadow舉例（text-shadow）h1 text-shadow: 5px 5px 5px #FF0000; 值描述h-shadow必需。水平陰影的位置。允許負值。v-shadow必需。垂直陰影的位置。允許負值。blur可選。模糊的距離。color可選。陰影的顏

6、色。參閱CSS 顏色值。filter定義了元素(通常是)的可視效果(例如：模糊與飽和度) filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();grayscale灰度opacity透明度sepia褐色brightness亮度saturate飽和度contrast對比度hue-rotate色相旋轉(zhuǎn)blur模糊invert反色Drop-shadow陰影fil

7、ter-grayscalegrayscale灰度#romance-webkit-filter:grayscale(100%);/* Chrome, Safari, Opera */filter:grayscale(100%);舉例（filter-grayscale）blurblur模糊圖片使用高斯模糊效果#romance -webkit-filter: blur(5px); /* Chrome, Safari, Opera */ filter: blur(5px);舉例（filter-blur）brightnessbrightness圖片變亮#romance -webkit-filter: b

8、rightness(200%); /* Chrome, Safari, Opera */ filter: brightness(200%);舉例（filter-brightness）contrastcontrast 對比度#romance -webkit-filter: contrast(500%); /* Chrome, Safari, Opera */ filter: contrast(500%);舉例（filter-contrast ）drop-shadowdrop-shadow陰影效果#romance -webkit-filter: drop-shadow(15px 15px 18px

9、 #222); /* Chrome, Safari, Opera */ filter: drop-shadow(15px 15px 18px #222);舉例（filter-drop-shadow）hue-rotate()hue-rotate色相旋轉(zhuǎn)#romance90 -webkit-filter: hue-rotate(90deg); /* Chrome, Safari, Opera */ filter: hue-rotate(90deg);#romance180 -webkit-filter: hue-rotate(180deg); /* Chrome, Safari, Opera */

10、 filter: hue-rotate(180deg);#romance270 -webkit-filter: hue-rotate(270deg); /* Chrome, Safari, Opera */ filter: hue-rotate(270deg);舉例（filter-hue-rotate ）invertInvert反轉(zhuǎn)輸入圖像#romance -webkit-filter: invert(100%); /* Chrome, Safari, Opera */ filter: invert(100%);舉例（filter-invert）opacityopacity透明度效果#roma

11、nce -webkit-filter: opacity(30%); /* Chrome, Safari, Opera */ filter: opacity(30%);舉例（filter-opacity）saturate saturate飽和度#romance -webkit-filter: saturate(300%); /* Chrome, Safari, Opera */ filter: saturate(300%);舉例（filter-saturate ）sepiasepia褐色#romance -webkit-filter: sepia(100%); /* Chrome, Safari

12、, Opera */ filter: sepia(100%);filterfilter復(fù)合函數(shù)使用多個濾鏡，每個濾鏡使用空格分隔。注意:順序是非常重要的 (例如使用 grayscale() 后再使用 sepia()將產(chǎn)生一個完整的灰度圖片)。#romance -webkit-filter: contrast(200%) brightness(150%); /* Chrome, Safari, Opera */ filter: contrast(200%) brightness(150%);舉例（ filter）Transition過渡transition簡寫屬性，用于在一個屬性中設(shè)置四個過渡屬

13、性。transition-property規(guī)定應(yīng)用過渡的 CSS 屬性的名稱。transition-duration定義過渡效果花費的時間。transition-timing-function規(guī)定過渡效果的時間曲線。transition-delay規(guī)定過渡效果何時開始。Transition過渡舉例：把鼠標指針放到 div 元素上，其寬度會從 100px 逐漸變?yōu)?300px。舉例（transition）div width:100px; transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transit

14、ion: width 2s; /* Safari 和 Chrome */ -o-transition: width 2s; /* Opera */ div:hover width:300px; transition-property 屬性用于指定應(yīng)用過渡效果的CSS屬性的名稱，其過渡效果通常在用戶將指針移動到元素上時發(fā)生。當(dāng)指定的CSS屬性改變時，過渡效果才開始。其基本語法格式如下：1、transition-property屬性transition-property: none | all | property;屬性值描述none沒有屬性會獲得過渡效果。all所有屬性都將獲得過渡效果。prop

15、erty定義應(yīng)用過渡效果的CSS屬性名稱，多個名稱之間以逗號分隔。transition-property.html2、transition-duration屬性transition-duration屬性用于定義過渡效果花費的時間，默認值為0，常用單位是秒（s）或者毫秒（ms）。其基本語法格式如下：transition-duration:time;transition-duration.html3、transition-timing-function屬性transition-timing-function屬性規(guī)定過渡效果的速度曲線，默認值為ease，其基本語法格式如下：transition-ti

16、ming-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);屬性值描述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,

17、0,0.58,1）。ease-in-out指定以慢速開始和結(jié)束的過渡效果，等同于cubic-bezier(0.42,0,0.58,1）。cubic-bezier(n,n,n,n)定義用于加速或者減速的貝塞爾曲線的形狀，它們的值在01之間。transition-timing-function.html4、transition-delay屬性transition-delay屬性規(guī)定過渡效果何時開始，默認值為0，常用單位是秒（s）或者毫秒（ms）。transition-delay的屬性值可以為正整數(shù)、負整數(shù)和0。當(dāng)設(shè)置為負數(shù)時，過渡動作會從該時間點開始，之前的動作被截斷；設(shè)置為正數(shù)時，過渡動作會延遲

18、觸發(fā)。其基本語法格式如下：transition-delay:time;5、transition屬性transition屬性是一個復(fù)合屬性，用于在一個屬性中設(shè)置transition-property、transition-duration、transition-timing-function、transition-delay四個過渡屬性。其基本語法格式如下：transition：property duration timing-function delay;在使用transition屬性設(shè)置多個過渡效果時，它的各個參數(shù)必須按照順序進行定義，不能顛倒。Animation 動畫keyframes規(guī)定

19、動畫。animation所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。animation-name規(guī)定 keyframes 動畫的名稱。animation-duration規(guī)定動畫完成一個周期所花費的秒或毫秒。animation-timing-function規(guī)定動畫的速度曲線。animation-delay規(guī)定動畫何時開始。animation-iteration-count規(guī)定動畫被播放的次數(shù)。animation-direction規(guī)定動畫是否在下一周期逆向地播放。animation-play-state規(guī)定動畫是否正在運行或暫停。animation-fill

20、-mode規(guī)定對象動畫時間之外的狀態(tài)。keyframes 規(guī)則實例：使 div 元素勻速向下移動：舉例（ animation-keyframes-fromto，animation-keyframes-%）divanimation:mymove 5s infinite;keyframes mymove from top:0px; to top:200px; -moz-keyframes mymove /* Firefox */ from top:0px; to top:200px; -webkit-keyframes mymove /* Safari 和 Chrome */ from top:0

21、px; to top:200px; -o-keyframes mymove /* Opera */ from top:0px; to top:200px; animation-name 屬性為 keyframes 動畫規(guī)定名稱說明：必須明確規(guī)定 animation-duration 屬性，否則時長為 0，就不會播放動畫。語法：animation-name: keyframename|none;值描述keyframename規(guī)定需要綁定到選擇器的 keyframe 的名稱。none規(guī)定無動畫效果（可用于覆蓋來自級聯(lián)的動畫）。ise_animation-duration 屬性定義動畫完成一個周期所

22、需要的時間，以秒或毫秒計。語法：舉例（ animation-duration ）animation-duration: time;值描述time規(guī)定完成動畫所花費的時間。默認值是 0，意味著沒有動畫效果。animation-timing-function 屬性animation-timing-function 規(guī)定動畫的速度曲線。速度曲線定義動畫從一套 CSS 樣式變?yōu)榱硪惶姿玫臅r間。速度曲線用于使變化更為平滑。語法：舉例（ animation-timing-function.html ）animation-timing-function: value;值描述linear動畫從頭到尾的速度是

23、相同的。ease默認。動畫以低速開始，然后加快，在結(jié)束前變慢。ease-in動畫以低速開始。ease-out動畫以低速結(jié)束。ease-in-out動畫以低速開始和結(jié)束。cubic-bezier(n,n,n,n)在 cubic-bezier （貝塞爾曲線）函數(shù)中自己的值。可能的值是從 0 到 1 的數(shù)值。animation-delay屬性animation-delay 屬性定義動畫何時開始。語法：允許負值，-2s 使動畫馬上開始，但跳過 2 秒進入動畫。舉例（ animation-delay.html ）animation-delay: time;animation-delay: -2s /*

24、W3C 和 Opera */ -moz-animation-delay: -2s /* Firefox */ -webkit-animation-delay: -2s /* Safari 和 Chrome */animation-iteration-count屬性animation-iteration-count 屬性定義動畫的播放次數(shù)語法：animation-iteration-count: n|infinite;值描述n定義動畫播放次數(shù)的數(shù)值。infinite規(guī)定動畫應(yīng)該無限次播放。 animation-direction 屬性animation-direction 屬性定義是否應(yīng)該輪流反

25、向播放動畫。如果 animation-direction 值是 alternate，則動畫會在奇數(shù)次數(shù)（1、3、5 等等）正常播放，而在偶數(shù)次數(shù)（2、4、6 等等）向后播放。注釋：如果把動畫設(shè)置為只播放一次，則該屬性沒有效果。語法：舉例（ animation-direction.html ）animation-direction: normal|alternate; animation-play-state屬性animation-play-state 屬性定義動畫的狀態(tài)。語法：舉例（ animation-play-state.html ）animation-play-state: runnin

26、g|paused;Running表示運動Paused表示暫停 animation-fill-mode屬性animation-fill-mode 屬性定義動畫結(jié)束后的狀態(tài)，語法：animation-fill-mode: none|forward|backward|both;none 無forward 動畫結(jié)束（to里面的所有樣式）時的狀態(tài)backward 動畫開始（from里面的所有樣式）時的狀態(tài)both 動畫開始或者結(jié)束時的狀態(tài)。 animation 屬性animation屬性是一個簡寫屬性，用于在一個屬性中設(shè)置animation-name、animation-duration、animati

27、on-timing-function、animation-delay、animation-iteration-count和animation-direction六個動畫屬性。其基本語法格式如下：在上述語法中，使用animation屬性時必須指定animation-name和animation-duration屬性，否則持續(xù)的時間為0，并且永遠不會播放動畫。animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animatio

28、n-direction;認識transformTransform屬性應(yīng)用于元素的2D或3D轉(zhuǎn)換。這個屬性允許你將元素旋轉(zhuǎn)，縮放，移動，傾斜等。語法：Transform能夠?qū)崿F(xiàn)：旋轉(zhuǎn)rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix等。舉例（ transform.html）transform: none|transform-functions;2D轉(zhuǎn)換平移使用translate()方法能夠重新定義元素的坐標，實現(xiàn)平移的效果。該函數(shù)包含兩個參數(shù)值，分別用于定義X軸和Y軸坐標，其基本語法格式如下：其中x-value是水平方向上，向右移動的距離；y-value指

29、元素在垂直方向上，向下移動的距離；如果省略了第二個參數(shù)，則取默認值0。當(dāng)值為負數(shù)時，表示反方向移動元素。舉例（ transform-translate）transform:translate（x-value,y-value）;2D轉(zhuǎn)換縮放scale() 方法用于縮放元素大小，該函數(shù)包含兩個參數(shù)值，分別用來定義寬度和高度的縮放比例。其基本語法格式如下：在上述語法中，x-axis和y-axis參數(shù)值可以是正數(shù)、負數(shù)和小數(shù)。正數(shù)值表示基于指定的寬度和高度放大元素。負數(shù)值不會縮小元素，而是翻轉(zhuǎn)元素（如文字被反轉(zhuǎn)），然后再縮放元素。舉例（ transform-scale）transform:scale(

30、x-axis,y-axis);ise_2D轉(zhuǎn)換傾斜skew()方法能夠讓元素傾斜顯示，該函數(shù)包含兩個參數(shù)值，分別用來定義X軸和Y軸坐標傾斜的角度。skew()可以將一個對象圍繞著X軸和Y軸按照一定的角度傾斜，其基本語法格式如下：在上述語法中，參數(shù)x-angle和y-angle表示角度值，第一個參數(shù)表示相對于X軸進行傾斜，第二個參數(shù)表示相對于Y軸進行傾斜，如果省略了第二個參數(shù)，則取默認值0。舉例（ transform-skew）transform:skew(x-angle,y-angle);ise_2D轉(zhuǎn)換旋轉(zhuǎn)rotate()方法能夠旋轉(zhuǎn)指定的元素對象，主要在二維空間內(nèi)進行操作。該方法中的參數(shù)允

31、許傳入負值，這時元素將逆時針旋轉(zhuǎn)。其基本語法格式如下：在上述語法中，參數(shù)angle表示要旋轉(zhuǎn)的角度值。如果角度為正數(shù)值，則按照順時針進行旋轉(zhuǎn)，否則，按照逆時針旋轉(zhuǎn)。舉例（ transform-rotate）transform:rotate(angle);ise_3D轉(zhuǎn)換更改變換的中心點通過transform屬性可以實現(xiàn)元素的平移、縮放、傾斜以及旋轉(zhuǎn)效果，這些變形操作都是以元素的中心點為基準進行的，如果需要改變這個中心點，可以使用transform-origin屬性，其基本語法格式如下：在上述語法中，transform-origin屬性包含三個參數(shù)，其默認值分別為50% 50% 0，各參數(shù)的具體

32、含義如下表所示。舉例（ transform-origin ）transform-origin: x-axis y-axis z-axis;ise_3D轉(zhuǎn)換更改變換的中心點值描述x-axis定義視圖被置于 X 軸的何處?？赡艿闹担簂eftcenterrightlength%y-axis定義視圖被置于 Y 軸的何處?？赡艿闹担簍opcenterbottomlength%z-axis定義視圖被置于 Z 軸的何處?？赡艿闹担簂engthise_3D轉(zhuǎn)換rotateX() rotateX()函數(shù)用于指定元素圍繞X軸旋轉(zhuǎn)，其基本語法格式如下：在上述語法格式中，參數(shù)a用于定義旋轉(zhuǎn)的角度值，單位為deg，其值

33、可以是正數(shù)也可以是負數(shù)。如果值為正，元素將圍繞X軸順時針旋轉(zhuǎn)；反之，如果值為負，元素圍繞X軸逆時針旋轉(zhuǎn)。舉例（ transform-rotateX ）transform:rotateX(a);ise_3D轉(zhuǎn)換rotateY() rotateY()函數(shù)指定一個元素圍繞Y軸旋轉(zhuǎn)，其基本語法格式如下：在上述語法中，參數(shù)a與rotateX(a)中的a含義相同，用于定義旋轉(zhuǎn)的角度。如果值為正，元素圍繞Y軸順時針旋轉(zhuǎn)；反之，如果值為負，元素圍繞Y軸逆時針旋轉(zhuǎn)。舉例（ transform-rotateY）transform:rotateY(a);3D轉(zhuǎn)換translate3d()translate3d(x,

34、y,z)只是規(guī)定3D轉(zhuǎn)換的一種形式，此函數(shù)用來規(guī)定指定元素在三維空間中的位移。其基本語法格式如下：x:表示在x軸方向的位移。y:表示在y軸方向的位移。z:表示在z軸方向的位移。translate3d(x,y,z);舉例（transform-translate3d）3D轉(zhuǎn)換其他方法需要說明的是，在CSS3中包含很多轉(zhuǎn)換的屬性，通過這些屬性可以設(shè)置不同的轉(zhuǎn)換效果，具體屬性如下表所示。屬性名稱描述transform向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換transform-style規(guī)定被嵌套元素如何在 3D 空間中顯示perspective規(guī)定 3D 元素的透視效果perspective-origin規(guī)定

35、 3D 元素的底部位置backface-visibility定義元素在不面對屏幕時是否可見ise_3D轉(zhuǎn)換其他方法另外，CSS3中還包含很多轉(zhuǎn)換的方法，運用這些方法可以實現(xiàn)不同的轉(zhuǎn)換效果，具體方法下表所示。方法名稱描述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)定義3D轉(zhuǎn)換，僅使用用于 Y 軸的值translateZ(z)定義3D轉(zhuǎn)換，僅使用用于Z 軸的值scale3d(x,y,z

36、)定義 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)換元素的透視視圖flex布局的傳統(tǒng)解決方案，基于盒狀模型，依賴display屬性 +position屬性 +float

37、屬性。它對于那些特殊布局非常不方便，比如，垂直居中就不容易實現(xiàn)。Flex布局是什么Flex是Flexible Box的縮寫，意為彈性布局，用來為盒狀模型提供最大的靈活性。任何一個容器都可以指定為Flex布局。行內(nèi)元素也可以使用Flex布局。Webkit內(nèi)核的瀏覽器，必須加上-webkit前綴。注意，設(shè)為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。舉例（flex1）.box display: flex; .box display: inline-flex; .box display: -webkit-flex; /* Safari */ displa

38、y: flex; Flex容器采用Flex布局的元素，稱為Flex容器（flex container），簡稱容器。它的所有子元素自動成為容器成員，稱為Flex項目（flex item），簡稱項目。容器的屬性flex-direction決定主軸的方向flex-wrap默認情況下，項目都排在一條線。flex-wrap屬性定義，如果一條軸線排不下，如何換行。flex-flow是flex-direction屬性和flex-wrap屬性的簡寫形式。justify-content定義了項目在主軸上的對齊方式align-items定義項目在交叉軸上如何對齊align-content定義了多根軸線的對齊方式。

39、如果項目只有一根軸線，該屬性不起作用。flex-direction屬性舉例（flex-direction）決定主軸的方向（即項目的排列方向）。.box flex-direction: row / 水平方向，起點左端 | row-reverse/水平方向，起點右端 | column /垂直方向，起點上沿 | column-reverse; /垂直方向，起點下沿 flex-wrap屬性默認情況下，項目都排在一條線（又稱軸線）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。舉例（flex-wrap）.box flex-wrap: nowrap /默認，不換行 | wrap /換行，第一

40、行在上方 | wrap-reverse; /換行，第一行在下方ise_justify-contentjustify-content屬性定義了項目在主軸上的對齊方式。.box justify-content: flex-start /左對齊 | flex-end /右對齊 | center /居中 | space-between /兩端對齊，項目之間的間隔都相等 | space-around;/每個項目兩側(cè)的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。 舉例（justify-content）ise_align-items屬性align-items屬性定義項目在交叉軸上如何對齊。舉例（

41、align-items）.boxalign-items: flex-start/交叉軸的起點對齊 | flex-end /交叉軸的終點對齊 | center /交叉軸的中點對齊| stretch; （默認值）：如果項目未設(shè)置高度或設(shè)為auto，將占滿整個容器的高度。 | baseline /項目的第一行文字的基線對齊Align-self定義flex子項單獨在側(cè)軸（縱軸）方向上的對齊方式。align-self：auto /如果align-self的值為auto，則其計算值為元素的父元素的align-items值，如果其沒有父元素，則計算值為stretch。 | flex-start /起始位置的

42、邊界緊靠住該行的側(cè)軸起始邊界| flex-end /起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界| center /彈性盒子元素在該行的側(cè)軸（縱軸）上居中放置| baseline /如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條，則該值與flex-start等效。其它情況下，該值將參與基線對齊| stretch / 如果指定側(cè)軸大小的屬性值為auto，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照min/max-width/height屬性的限制。舉例（align-self）Align-self.box li:nth-child(1) -webkit-align-self: flex-end; align-self: flex