Web前端技術(shù)HTML5+CSS3+響應(yīng)式設(shè)計(jì) 課件 8-css3新增屬性

Web前端技術(shù)（HTML5+CSS3+響應(yīng)式設(shè)計(jì)）第8章CSS3的新增屬性問(wèn)題的導(dǎo)入CSS3是CSS2的升級(jí)版本，也是一個(gè)新標(biāo)準(zhǔn)，它增加了很多強(qiáng)大的新功能，比如說(shuō)圓角、陰影、動(dòng)畫、變形等，通過(guò)這些屬性的設(shè)置，可以減少圖片的使用，在不使用javaScript情況下，也能實(shí)現(xiàn)交互的效果。導(dǎo)入問(wèn)題教學(xué)內(nèi)容漸變gradient和過(guò)渡transition邊框圓角border-radius盒子陰影box-shadow變形transfrom分列布局columns動(dòng)畫animations8.1分列布局1、Column-count語(yǔ)法：column-count：列數(shù)；

2、Column-width：Column-width：每列寬度，

Columns：復(fù)合屬性，可以設(shè)置寬度和列數(shù)。3.column-gap：<length>|normal

設(shè)置或檢索對(duì)象的列與列之間的間隙

如：column-gap:normal;column-gap:40px;4.column-rule：[column-rule-width]||[column-rule-style]||[column-rule-color]設(shè)置或檢索對(duì)象的列與列之間的邊框。復(fù)合屬性。相當(dāng)于border屬性5.column-span：none|all

設(shè)置或檢索對(duì)象元素是否橫跨所有列。

說(shuō)明：edge、chrome50、ie10以上都支持多列屬性。InternetExplorer9以及更早的版本不支持多列屬性。部分版本需要加指定瀏覽器的前綴：chrome、safari、opear為-webkit-，firefox為-moz-。8.2文字陰影text-shadow給文字設(shè)置陰影，減少圖片的使用語(yǔ)法格式：text-shadow:X軸偏移量Y軸偏移量

陰影模糊半徑

陰影顏色；1、X軸偏移量，必選項(xiàng)，設(shè)置水平陰影的大小，正值陰影向右投影，負(fù)值向左投影。2、Y軸偏移量，必選項(xiàng)，垂直方向陰影的大小，正值陰影向下投影，負(fù)值向上投影。3、陰影模糊半徑，可選項(xiàng)，陰影的模糊距離，其值只能是為正值，如果其值為0時(shí)，表示陰影不具有模糊效果，其值越大陰影的邊緣就越模糊。4、陰影顏色，可選項(xiàng)，陰影的顏色，如果缺省，則瀏覽器會(huì)取默認(rèn)色，但各瀏覽器默認(rèn)色不一樣，不建議缺省。5、可以疊加多個(gè)陰影，用逗號(hào)分隔，以增加文字的立體的效果8.3box-shadow盒陰影box-shadow:投影方式X軸偏移量Y軸偏移量陰影模糊半徑陰影擴(kuò)展半徑陰影顏色；投影方式：可選項(xiàng)，它有2個(gè)取值：outset：默認(rèn)值，它的投影方式是外陰影；Inset：它的投影方式為內(nèi)陰影。X軸偏移量，必選項(xiàng)，是指陰影水平偏移量，其值可以是正負(fù)值Y軸偏移量，必選項(xiàng)，是指陰影的垂直偏移量，其值也可以是正負(fù)值陰影模糊半徑，可選項(xiàng)，但其值只能是為正值，為0時(shí)，陰影不具有模糊效果陰影擴(kuò)展半徑，可選項(xiàng)，其值可以是正負(fù)值，如果值為正，陰影擴(kuò)大，負(fù)值，則縮??；陰影顏色，可選，如果不設(shè)定任何顏色時(shí)，瀏覽器會(huì)取默認(rèn)色，建議不要省略此參數(shù)?？梢辕B加多個(gè)陰影，用逗號(hào)分隔，以增加陰影的效果。CSS3的圓角邊框?qū)嶋H上是在矩形的四個(gè)角分別做內(nèi)切圓，然后通過(guò)設(shè)置內(nèi)切圓的半徑來(lái)控制圓角的弧度。CSS3的圓角邊框使用border-radius

屬性來(lái)實(shí)現(xiàn)，這是一個(gè)復(fù)合屬性，基本語(yǔ)法如下border-radius:1-4length|%/1-4length|%;8.4CSS3圓角邊框

border-radiusLength：半徑單位，不可為負(fù)值，單位可以是px、em、rem或百分比。如果“/”前后的值都存在，那么“/”前面的值表示水平半徑，“/”后面值表示垂直半徑。如果沒有“/”，則表示水平和垂直半徑相等。如果給定4對(duì)值，則分別表示top-left、top-right、bottom-right、bottom-left的4個(gè)角的半徑如果給定3對(duì)值。則第1個(gè)值為top-left，第2個(gè)值為top-right，bottom-left，第3個(gè)值為bottom-right如果給定2對(duì)值。則第1個(gè)值為top-left和bottom-right，第2個(gè)值為top-right，bottom-left如果只給出一個(gè)值，則4個(gè)角的半徑都相同。border-radiusborder-radius是一種縮寫的方式，其實(shí)border-radius和border屬性一樣，還可以把各個(gè)角單獨(dú)拆分出來(lái)，也就是以下四種寫法：其他寫法border-top-left-radius:<length>

<length>//左上角border-top-right-radius:<length>

<length>//右上角border-bottom-right-radius:<length>

<length>//右下角border-bottom-left-radius:<length>

<length>//左下角border-radius8.5漸變Gradient漸變色指在兩個(gè)或多個(gè)顏色之間平穩(wěn)的過(guò)渡的效果，CSS3的漸變分為linear-gradient（線性漸變）和radial-gradient（徑向漸變），使用的是background或background-images屬性，不能用background-color屬性。1、線性漸變，指以線性角度控制漸變。語(yǔ)法格式：linear-gradient([<angle>],<color-stop>[,<color-stop>]……)說(shuō)明：color：必選項(xiàng)，是指漸變的顏色，至少要2種以上的顏色。stop：可選性，指漸變開始的位置，缺省則均勻漸變。angle：可選性，指的是漸變的線性角度，取值有兩種:一種是角度（單位為deg）;另外一種是使用關(guān)鍵字，linear-gradient（1）顏色均勻間隔的漸變（2）顏色不均勻分布的漸變（3）重復(fù)的線性漸變r(jià)adial-gradient徑向漸變，指的是顏色從內(nèi)到外進(jìn)行的圓形或橢圓漸變，顏色不再沿著一條直線漸變，而是從一個(gè)起點(diǎn)向所有方向漸變。語(yǔ)法格式如下background:radial-gradient(position,shapesize,color1-stop,color2-stop…)position：可選項(xiàng)，用于定義徑向漸變的“圓心位置”，取值跟background-position屬性取值一樣，如缺省，默認(rèn)為中心點(diǎn)。shape：可選項(xiàng)，漸變的形狀。取值為值circle或ellipse，circle表示圓形，ellipse表示橢圓形。默認(rèn)值是ellipse。size：可選項(xiàng)，漸變的尺寸大小。color：必選項(xiàng)，定義漸變的顏色，至少有2種以上的顏色。（1）顏色均勻間隔的徑向漸變 div{ width:150px; height:100px; background:radial-gradient(red,yellow,#ccc); }（2）顏色不均勻分布的徑向漸變div{ width:100px; height:100px; background:radial-gradient(circle,red5%,yellow40%,#ccc70%); }radial-gradientCSS3的過(guò)渡就是平滑的改變一個(gè)元素的CSS值，使元素從一個(gè)樣式逐漸過(guò)渡到另一個(gè)樣式。8.6CSS3過(guò)渡transitions基本語(yǔ)法如下：transition:[property][duration][timing-function][delay];InternetExplorer10、Firefox、Opera和Chrome都支持transition屬性，InternetExplorer9以及更早版本的瀏覽器不支持transition屬性。（1）property：必選項(xiàng)，給定要使用過(guò)渡的CSS屬性名稱，取值為：none：無(wú)，沒有屬性使用該效果all：所有css屬性都使用過(guò)渡效果property：具體過(guò)渡效果的css屬性名：如width、color等（2）duration：必選項(xiàng)，給定過(guò)渡效果所花費(fèi)時(shí)間，單位毫秒，默認(rèn)是0，意味著沒有效果。（3）timing-function：可選性，定義過(guò)渡效果的速度曲線。取值為：Linear：規(guī)定以相同速度開始至結(jié)束的過(guò)渡效果ease：默認(rèn)值，規(guī)定慢速開始，然后變快，然后慢速結(jié)束的過(guò)渡效果ease-in：

規(guī)定以慢速開始的過(guò)渡效果ease-out 規(guī)定以慢速結(jié)束的過(guò)渡效果ease-in-out：規(guī)定以慢速開始和結(jié)束的過(guò)渡效果（4）delay：可選性，給定過(guò)渡開始之前需要等待的時(shí)間，單位毫秒，默認(rèn)是0。transitionstransform，翻譯成中文的含義是“改變，使…變形；轉(zhuǎn)換”，用于向元素應(yīng)用2D或3D轉(zhuǎn)換。transform屬性的基本語(yǔ)法如下所示：transform：none|transform-functions;旋轉(zhuǎn)傾斜縮放移動(dòng)8.7CSS3變形transform屬性

描述參數(shù)說(shuō)明rotate(angel)旋轉(zhuǎn)元素。angel是度數(shù)值，代表旋轉(zhuǎn)角度。skew(x-angel,y-angel)傾斜元素。angel是度數(shù)值，代表傾斜角度。skewX(angel)沿著x軸傾斜元素。skewY(angel)沿著y軸傾斜元素。scale(x，y)縮放元素，改變?cè)氐母叨群蛯挾?。代表縮放比例，取值包括正數(shù)、負(fù)數(shù)和小數(shù)。scaleX(x)改變?cè)氐膶挾?。scaleY(y)改變?cè)氐母叨?。translate(x,y)移動(dòng)元素對(duì)象，基于x和y坐標(biāo)重新定位元素。元素移動(dòng)的數(shù)值，x代表左右方向，y代表上下方向，向左和向上使用負(fù)數(shù)，反之用正數(shù)。translateX(x)沿著x軸移動(dòng)元素。translateY(y)沿著y軸移動(dòng)元素。

transform函數(shù)一個(gè)完整的CSSanimations由兩部分構(gòu)成：一組定義的動(dòng)畫關(guān)鍵幀調(diào)用動(dòng)畫@keyframes規(guī)則Animation8.8動(dòng)畫animations定義動(dòng)畫在CSS3中使用@keyframes規(guī)則來(lái)創(chuàng)建動(dòng)畫，keyframes可以設(shè)置多個(gè)關(guān)鍵幀，每個(gè)關(guān)鍵幀表示動(dòng)畫過(guò)程中的一個(gè)狀態(tài)，多個(gè)關(guān)鍵幀就可以使動(dòng)畫十分絢麗。@keyframes規(guī)則的語(yǔ)法格式如下所示：@keyframes

animationname{

keyframes-selector{css-styles;}}animationname：表示當(dāng)前動(dòng)畫的名稱，必選項(xiàng)。keyframes-selector：關(guān)鍵幀選擇器，描述關(guān)鍵幀的位置值，取值范圍從0%~100%，也可以是關(guān)鍵字from或者to。其中from等同于0%，表示動(dòng)畫的開始，to等同于100%。動(dòng)畫創(chuàng)建好后，使用animation屬性調(diào)用動(dòng)畫。它的基本語(yǔ)法如下所示：animation:[name][duration][timing-function][delay][iteration-count][direction][fill-modeplay-state];InternetExplorer10、Firefox16.0、chrome43.0、safari9.0以上版本都支持@keyframes

規(guī)則和animation屬性。InternetExplorer9，以及更早的版本，不支持@keyframe

規(guī)則或animation屬性。調(diào)用動(dòng)畫animationsAnimation屬性屬性

描述name@keyframes中定義的動(dòng)畫名稱，取值none，則無(wú)動(dòng)畫效果，必選項(xiàng)。duration動(dòng)畫完成一個(gè)周期所花費(fèi)時(shí)間，單位毫秒，默認(rèn)是0，必選項(xiàng)timing-function規(guī)定動(dòng)畫的速度曲線，取值同transition–timing-function的值，默認(rèn)是"ease"，可選。delay規(guī)定動(dòng)畫開始前的延遲，單位毫秒，可選，默認(rèn)是0。iteration-count規(guī)定動(dòng)畫被播放的次數(shù)，取值為n，默認(rèn)是1，infinite為無(wú)限播放，可選direction規(guī)定動(dòng)畫播放方向，默認(rèn)是"normal"，可選。reverse倒序播放,alternate交替播放