一金赦、CSS3 邊框

在 css3 中新增的邊框?qū)傩匀缦拢?/p>

創(chuàng)建圓角邊框 示例

在CSS2中添加圓角很棘手拭宁，我們不得不在每個(gè)角落使用不同的圖像洛退。但是在CSS3中通過(guò)添加一個(gè)屬性就可以搞定，那就是border-radius杰标，代碼如下：
語(yǔ)法： border-radius : length length;

length： 由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值（如：20px）兵怯。不可為負(fù)值，如果為負(fù)值則與0展示效果一樣腔剂。第一個(gè)值設(shè)置其水平半徑媒区，第二個(gè)值設(shè)置其垂直半徑，如果第二個(gè)值省略則默認(rèn)第二個(gè)值等于第一個(gè)值。

div{ 
  border: 1px solid; /* 設(shè)置每個(gè)圓角水平半徑和垂直半徑都為30px */ 
  border-radius: 30px;
}

border-radius是4個(gè)角的縮寫(xiě)方法袜漩。四個(gè)角的表示順序與border類似按照border-top-left-radius谅畅、border-top-right-radius、border-bottom-right-radius噪服、border-bottom-left-radius的順序來(lái)設(shè)置：

div{
  border: 1px solid;
  /* 如果 / 前后的值都存在毡泻，那么 / 前面的值設(shè)置其水平半徑，/ 后面值設(shè)置其垂直半徑粘优，如果沒(méi)有 / 仇味，則水平和垂直半徑相等 */
  border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px;
 /* 上面寫(xiě)法等價(jià)于下面的寫(xiě)法，第一個(gè)值是水平半徑雹顺，第二個(gè)值是垂直半徑 */
  border-top-left-radius: 10px 20px;
  border-top-right-radius: 15px 30px;
  border-bottom-right-radius: 20px 10px;
  border-bottom-left-radius: 30px 15px;
}

border-radius指定不同數(shù)量的值遵循對(duì)角相等的原則丹墨，即指定了值的取指定值，沒(méi)有指定值的與對(duì)角值相等嬉愧，對(duì)角相等模型如下：

邊框陰影

通過(guò)屬性box-shadow向邊框添加陰影贩挣。

語(yǔ)法： {box-shadow : [inset] x-offset y-offset blur-radius extension-radius spread-radiuscolor}

說(shuō)明：對(duì)象選擇器 {box-shadow:[投影方式] X軸偏移量 Y軸偏移量 模糊半徑 陰影擴(kuò)展半徑 陰影顏色}

div{
  /* 內(nèi)陰影，向右偏移10px没酣，向下偏移10px王财，模糊半徑5px，陰影縮小10px */
  box-shadow: inset 10px 10px 5px -10px #888888;
}

box-shadow屬性的參數(shù)設(shè)置取值：

陰影類型：此參數(shù)可選裕便。如不設(shè)值绒净，默認(rèn)投影方式是外陰影；如取其唯一值inset 偿衰，其投影為內(nèi)陰影挂疆；

X-offset:陰影水平偏移量，其值可以是正負(fù)值下翎。如果值為正值缤言，則陰影在對(duì)象的右邊，其值為負(fù)值時(shí)视事，陰影在對(duì)象的左邊胆萧；

Y-offset:陰影垂直偏移量，其值也可以是正負(fù)值郑口。如果為正值鸳碧，陰影在對(duì)象的底部，其值為負(fù)值時(shí)犬性，陰影在對(duì)象的頂部瞻离；

Blur-radius:陰影模糊半徑：此參數(shù)可選，但其值只能是為正值乒裆，如果其值為0時(shí)套利，表示陰影不具有模糊效果，其值越大陰影的邊緣就越模糊；

Extension-radius陰影擴(kuò)展半徑：此參數(shù)可選肉迫，其值可以是正負(fù)值验辞，如果值為正，則整個(gè)陰影都延展擴(kuò)大喊衫，反之值為負(fù)值時(shí)跌造，則縮小族购；

陰影顏色：此參數(shù)可選壳贪。如不設(shè)定顏色，瀏覽器會(huì)取默認(rèn)色寝杖，但各瀏覽器默認(rèn)取色不一致违施，特別是在webkit內(nèi)核下的safari和chrome瀏覽器下表現(xiàn)為透明色，在Firefox/Opera下表現(xiàn)為黑色（已驗(yàn)證）瑟幕，建議不要省略此參數(shù)磕蒲。

邊框圖片
語(yǔ)法：

border-image : border-image-source || border-image-slice [ / border-image-width] || border-image-repeat
border-image ： none | image [ number | percentage]{1,4} [ / border-width>{1,4} ] ? [ stretch | repeat | round ]{0,2}

div{
  border-image:url(border.png) 30 30 round;

  border-image: url(border.png) 20/10px repeat;
}

border-image的參數(shù)說(shuō)明：

none:是border-image的默認(rèn)值，如果取值為none時(shí)只盹，表示邊框無(wú)背景圖片辣往；
image：設(shè)置border-image的背景圖片，這個(gè)跟background-image一樣鹿霸，使用絕對(duì)或相對(duì)的url地址排吴，來(lái)指定背景圖片；
number：number是一個(gè)數(shù)值懦鼠，用來(lái)設(shè)置邊框的寬度，其單位是px屹堰，其實(shí)就像border-width一樣取值肛冶，可以使用1~4個(gè)值，其具體表示四個(gè)方位的值扯键，可以參考border-width的設(shè)置方式睦袖；
percntage：percntage也是用來(lái)設(shè)置邊框的寬度，跟number不同之處是荣刑，其使用的是百分比值來(lái)設(shè)置邊框?qū)挾龋?stretch,repeat,round:他們是用來(lái)設(shè)置邊框背景圖片的鋪放方式馅笙，類似于background-position，其中stretch是拉伸厉亏，repeat是重復(fù)董习，round是平鋪，stretch為默認(rèn)值爱只。
border-image-slice 這玩意比較復(fù)雜皿淋，感覺(jué)是看明白了，但是就是做不出例子的效果，不知道是資源圖片的原因還是寫(xiě)法的原因窝趣，還是瀏覽器的原因還是寫(xiě)例子的人自己都沒(méi)整明白疯暑，這東西現(xiàn)在比較糊，到時(shí)整明白在整理哑舒。

二妇拯、CSS3 背景

background-size屬性 示例

在 CSS3 之前，背景圖片的尺寸是由圖片的實(shí)際尺寸決定的洗鸵。在 CSS3 中乖阵，可以設(shè)置背景圖片的尺寸，這就允許我們?cè)诓煌沫h(huán)境中重復(fù)使用背景圖片预麸〉山可以像素或百分比規(guī)定尺寸。如果以百分比規(guī)定尺寸吏祸，那么尺寸相對(duì)于父元素的寬度和高度对蒲。

div{
  background:url(bg_flower.gif);
  /* 通過(guò)像素規(guī)定尺寸 */
  background-size:63px 100px;

  /* 通過(guò)百分比規(guī)定尺寸 */
  background-size:100% 50%;
  background-repeat:no-repeat;
}

background-origin屬性 示例

規(guī)定背景圖片的定位區(qū)域，背景圖片可以放置于 content-box贡翘、padding-box或border-box區(qū)域蹈矮，

div{
  background:url(bg_flower.gif);
  background-repeat:no-repeat;
  background-size:100% 100%;
  /* 規(guī)定背景圖片的定位區(qū)域 */
  background-origin:content-box;
}

區(qū)域的具體劃分如下：

與background-origin屬性相似，規(guī)定背景顏色的繪制區(qū)域鸣驱，區(qū)域劃分與background-origin屬性相同泛鸟。

div{ background-color:yellow; background-clip:content-box;}

CSS3 多重背景圖片 示例

CSS3 允許為元素設(shè)置多個(gè)背景圖像

body{ background-image:url(bg_flower.gif),url(bg_flower_2.gif);}

三、CSS3 文本效果

text-shadow屬性 示例

給為本添加陰影踊东，能夠設(shè)置水平陰影北滥、垂直陰影、模糊距離闸翅，以及陰影的顏色再芋。

h1{ text-shadow: 5px 5px 5px #FF0000;}

text-wrap屬性 示例

設(shè)置區(qū)域內(nèi)的自動(dòng)換行。
語(yǔ)法： text-wrap: normal | none | unrestricted | suppress | break-word;

/* 允許對(duì)長(zhǎng)單詞進(jìn)行拆分坚冀，并換行到下一行 */
p {word-wrap:break-word;}

四壳猜、CSS3 字體

字體定義

在 CSS3 之前，web 設(shè)計(jì)師必須使用已在用戶計(jì)算機(jī)上安裝好的字體贺拣。但是通過(guò) CSS3蓖谢，web 設(shè)計(jì)師可以使用他們喜歡的任意字體捂蕴。當(dāng)找到或購(gòu)買(mǎi)到希望使用的字體時(shí)，可將該字體文件存放到 web 服務(wù)器上闪幽，它會(huì)在需要時(shí)被自動(dòng)下載到用戶的計(jì)算機(jī)上啥辨。字體需要在 CSS3 @font-face 規(guī)則中定義。

/* 定義字體 */
@font-face{
font-family: myFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot');     /* IE9+ */
}

div{
font-family:myFont;
}

使用粗體字體

"Sansation_Light.ttf"文件 是定義的正常字體盯腌，"Sansation_Bold.ttf" 是另一個(gè)字體文件溉知，它包含了 Sansation 字體的粗體字符。只要 font-family 為 "myFirstFont" 的文本需要顯示為粗體腕够，瀏覽器就會(huì)使用該字體级乍。

（其實(shí)沒(méi)弄清楚這樣處理的原因，經(jīng)測(cè)試直接在html中通過(guò) b 標(biāo)簽也可以實(shí)現(xiàn)加粗的效果）

/* 定義正常字體 */
@font-face{
  font-family: myFirstFont;
  src: url('/example/css3/Sansation_Light.ttf'),
       url('/example/css3/Sansation_Light.eot'); /* IE9+ */
}

/* 定義粗體時(shí)使用的字體 */
@font-face{
  font-family: myFirstFont;
  src: url('/example/css3/Sansation_Bold.ttf'),
       url('/example/css3/Sansation_Bold.eot'); /* IE9+ */
  /* 標(biāo)識(shí)屬性 */
  font-weight:bold;
}

div{
  font-family:myFirstFont;
}

五帚湘、CSS3 2D 轉(zhuǎn)換

通過(guò) CSS3 轉(zhuǎn)換玫荣，我們能夠?qū)υ剡M(jìn)行移動(dòng)、縮放大诸、轉(zhuǎn)動(dòng)捅厂、拉長(zhǎng)或拉伸，轉(zhuǎn)換是使元素改變形狀资柔、尺寸和位置的一種效果焙贷。

translate() 方法 示例

通過(guò) translate(x , y) 方法，元素根據(jù)給定的 left（x 坐標(biāo)） 和 top（y 坐標(biāo)） 位置參數(shù)從其當(dāng)前位置移動(dòng)贿堰，x為正值向右移動(dòng)辙芍，為負(fù)值向左移動(dòng)；y為正值向下移動(dòng)羹与，為負(fù)值向上移動(dòng)故硅；

div{
  transform: translate(50px,100px);
  -ms-transform: translate(50px,100px);           /* IE 9 */
  -webkit-transform: translate(50px,100px);     /* Safari and Chrome */
  -o-transform: translate(50px,100px);           /* Opera */
  -moz-transform: translate(50px,100px);        /* Firefox */
}

rotate() 方法 示例

控制元素順時(shí)針旋轉(zhuǎn)給定的角度。為正值注簿，元素將順時(shí)針旋轉(zhuǎn)契吉。為負(fù)值，元素將逆時(shí)針旋轉(zhuǎn)诡渴。
div{ transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 / -webkit-transform: rotate(30deg); / Safari and Chrome / -o-transform: rotate(30deg); / Opera / -moz-transform: rotate(30deg); / Firefox */}

scale() 方法 示例

根據(jù)給定的寬度（X 軸）和高度（Y 軸）參數(shù)，控制元素的尺寸的增加菲语、減少妄辩。

div{
  transform: scale(2,4);
  -ms-transform: scale(2,4);         /* IE 9 */
  -webkit-transform: scale(2,4);     /* Safari 和 Chrome */
  -o-transform: scale(2,4);            /* Opera */
  -moz-transform: scale(2,4);       /* Firefox */
}

skew() 方法 示例

根據(jù)給定的水平線（X 軸）和垂直線（Y 軸）參數(shù)設(shè)置元素翻轉(zhuǎn)給定的角度。

/* 設(shè)置圍繞 X 軸把元素翻轉(zhuǎn) 30 度山上，圍繞 Y 軸翻轉(zhuǎn) 20 度眼耀。 */
div{
  transform: skew(30deg,20deg);
  -ms-transform: skew(30deg,20deg);         /* IE 9 */
  -webkit-transform: skew(30deg,20deg);     /* Safari and Chrome */
  -o-transform: skew(30deg,20deg);          /* Opera */
  -moz-transform: skew(30deg,20deg);        /* Firefox */
}

matrix() 方法 示例

matrix() 方法把所有 2D 轉(zhuǎn)換方法組合在一起。matrix() 方法需要六個(gè)參數(shù)佩憾，包含數(shù)學(xué)函數(shù)哮伟，允許旋轉(zhuǎn)干花、縮放、移動(dòng)以及傾斜元素楞黄。

/* 使用 matrix 方法將 div 元素旋轉(zhuǎn) 30 度 */
div{
 transform:matrix(0.866,0.5,-0.5,0.866,0,0);
 -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);          /* IE 9 */
 -moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);         /* Firefox */
 -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);      /* Safari and Chrome */
 -o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);           /* Opera */
}

2D Transform 方法匯總

|函數(shù) |描述|
| ------------- |:-------------:| -----:|
|matrix(n,n,n,n,n,n) |定義 2D 轉(zhuǎn)換池凄，使用六個(gè)值的矩陣。|
|translate(x,y) |定義 2D 轉(zhuǎn)換鬼廓，沿著 X 和 Y 軸移動(dòng)元素肿仑。|
|translateX(n) |定義 2D 轉(zhuǎn)換，沿著 X 軸移動(dòng)元素碎税。|
|translateY(n)| 定義 2D 轉(zhuǎn)換，沿著 Y 軸移動(dòng)元素。|
|scale(x,y) |定義 2D 縮放轉(zhuǎn)換冀值，改變?cè)氐膶挾群透叨人萜埂
|scaleX(n) |定義 2D 縮放轉(zhuǎn)換，改變?cè)氐膶挾确嘶汀
|scaleY(n) |定義 2D 縮放轉(zhuǎn)換责蝠，改變?cè)氐母叨取
|rotate(angle) |定義 2D 旋轉(zhuǎn)虐杯，在參數(shù)中規(guī)定角度玛歌。|
|skew(x-angle,y-angle)| 定義 2D 傾斜轉(zhuǎn)換，沿著 X 和 Y 軸擎椰。|
|skewX(angle) |定義 2D 傾斜轉(zhuǎn)換支子，沿著 X 軸。|
|skewY(angle) |定義 2D 傾斜轉(zhuǎn)換达舒，沿著 Y 軸值朋。|

六、CSS3 3D 轉(zhuǎn)換

CSS3 允許使用 3D 轉(zhuǎn)換來(lái)對(duì)元素進(jìn)行格式化

rotateX() 方法 示例

/* 設(shè)置元素圍繞其 X 軸以給定的度數(shù)進(jìn)行旋轉(zhuǎn) */
div{
  transform: rotateX(120deg);
  -webkit-transform: rotateX(120deg);    /* Safari 和 Chrome */
  -moz-transform: rotateX(120deg);    /* Firefox */
}

rotateY() 旋轉(zhuǎn) 示例

/* 設(shè)置元素圍繞其 Y 軸以給定的度數(shù)進(jìn)行旋轉(zhuǎn) */
div{
  transform: rotateY(130deg);
  -webkit-transform: rotateY(130deg);    /* Safari 和 Chrome */
  -moz-transform: rotateY(130deg);    /* Firefox */
}

2017百度前端學(xué)院熱身試題 [百度前端學(xué)院熱身試題-第三題]
(http://ife.baidu.com/game/warmUp#/F4A83299B6A3990C231A5693E52A25A1BB3AAB) 就重點(diǎn)考察了元素2D巩搏、3D轉(zhuǎn)換的內(nèi)容昨登，說(shuō)明這部分是比較適用比較重要的部分，要熟練掌握贯底。

七丰辣、CSS3 過(guò)渡

通過(guò) CSS3可以在不使用 Flash 動(dòng)畫(huà)或 JavaScript 的情況下，當(dāng)元素從一種樣式變換為另一種樣式時(shí)為元素添加效果禽捆。

要實(shí)現(xiàn)這一點(diǎn)笙什，必須規(guī)定以下兩項(xiàng)內(nèi)容：

·設(shè)置添加過(guò)渡效果的 CSS 屬性；
·設(shè)置過(guò)渡效果的時(shí)長(zhǎng)胚想；

注意： 如果時(shí)長(zhǎng)未設(shè)置琐凭，則不會(huì)有過(guò)渡效果，因?yàn)槟J(rèn)值是 0浊服。

單項(xiàng)改變 示例

/* 設(shè)置將變化效果添加在“寬度”上统屈，時(shí)長(zhǎng)為2秒胚吁；該時(shí)長(zhǎng)在其他屬性上并不適用 */
div{
  transition: width 2s;
  -moz-transition: width 2s;         /* Firefox 4 */
  -webkit-transition: width 2s;      /* Safari 和 Chrome */
  -o-transition: width 2s;           /* Opera */
}
/* 配合在一起使用的效果就是當(dāng)鼠標(biāo)移上去的時(shí)候?qū)挾茸優(yōu)?00px，這個(gè)過(guò)程耗時(shí)2秒 */
div:hover{
  width:300px;
}

注意： 當(dāng)鼠標(biāo)移出元素時(shí)愁憔，它會(huì)逐漸變回原來(lái)的樣式腕扶。

多項(xiàng)改變 示例

如需向多個(gè)樣式添加過(guò)渡效果，請(qǐng)?zhí)砑佣鄠€(gè)屬性惩淳，由逗號(hào)隔開(kāi)蕉毯。

/* 同時(shí)向?qū)挾取⒏叨群娃D(zhuǎn)換添加過(guò)渡效果 */
div{
  transition: width 2s, height 2s, transform 2s;
  -moz-transition: width 2s, height 2s, -moz-transform 2s;
  -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
  -o-transition: width 2s, height 2s,-o-transform 2s;
}

/* 當(dāng)鼠標(biāo)移上時(shí)寬度和高度都變成200px思犁，同時(shí)旋轉(zhuǎn)180度代虾，每個(gè)屬性變化都耗時(shí)2秒 */
div:hover{
  width:200px;
  height:200px;
  transform:rotate(180deg);
  -moz-transform:rotate(180deg);        /* Firefox 4 */
  -webkit-transform:rotate(180deg);     /* Safari and Chrome */
  -o-transform:rotate(180deg);          /* Opera */
}

過(guò)渡屬性詳解 詳解

transition是簡(jiǎn)寫(xiě)屬性，
語(yǔ)法： transition : transition-property | transition-duration | transition-timing-function | transition-delay;

/* 設(shè)置在寬度上添加過(guò)渡效果激蹲，時(shí)長(zhǎng)為1秒棉磨，過(guò)渡效果時(shí)間曲線為linear，等待2秒后開(kāi)始過(guò)渡 */
div{
  transition: width 1s linear 2s;
  -moz-transition: width 1s linear 2s;       /* Firefox 4 */
  -webkit-transition: width 1s linear 2s;    /* Safari and Chrome */
  -o-transition: width 1s linear 2s;         /* Opera */
}

|屬性|描述|
| ------------- |:-------------:| -----:|
|transition|簡(jiǎn)寫(xiě)屬性学辱，用于在一個(gè)屬性中設(shè)置四個(gè)過(guò)渡屬性乘瓤。|
|transition-property|規(guī)定應(yīng)用過(guò)渡的 CSS 屬性的名稱。|
|transition-duration|定義過(guò)渡效果花費(fèi)的時(shí)間策泣。默認(rèn)是 0衙傀。|
|transition-timing-function|規(guī)定過(guò)渡效果的時(shí)間曲線。默認(rèn)是 "ease"萨咕。|
|transition-delay|規(guī)定過(guò)渡效果何時(shí)開(kāi)始统抬。默認(rèn)是 0。|

八危队、CSS3 動(dòng)畫(huà)

通過(guò) CSS3可以創(chuàng)建動(dòng)畫(huà)聪建，這些動(dòng)畫(huà)可以取代網(wǎng)頁(yè)中的畫(huà)圖片、Flash 動(dòng)畫(huà)以及 JavaScript茫陆。

CSS3 中通過(guò)@keyframes 規(guī)則來(lái)創(chuàng)建動(dòng)畫(huà)金麸。在 @keyframes 中規(guī)定某項(xiàng) CSS 樣式，就能創(chuàng)建由當(dāng)前樣式（動(dòng)畫(huà)開(kāi)始前的樣式）逐漸改為新樣式（需要變到的樣式）的動(dòng)畫(huà)效果簿盅。

通過(guò)from , to關(guān)鍵字設(shè)置動(dòng)畫(huà)發(fā)生的時(shí)間 示例

/* 通過(guò)@keyframes 創(chuàng)建動(dòng)畫(huà) */
@keyframes myfirst{
  from {background: red;}
  to {background: yellow;}
}
/* Firefox */
@-moz-keyframes myfirst {
  from {background: red;}
  to {background: yellow;}
}
/* Safari 和 Chrome */
@-webkit-keyframes myfirst {
  from {background: red;}
  to {background: yellow;}
}
/* Opera */
@-o-keyframes myfirst {
  from {background: red;}
  to {background: yellow;}
}

/*
   將創(chuàng)建的動(dòng)畫(huà)綁定到選擇器挥下，并至少指定以下兩項(xiàng) CSS3 動(dòng)畫(huà)屬性
   1.指定動(dòng)畫(huà)的名稱；
   2.指定動(dòng)畫(huà)的時(shí)長(zhǎng)桨醋；
*/
div{
  animation: myfirst 5s;
  -moz-animation: myfirst 5s;       /* Firefox */
  -webkit-animation: myfirst 5s;    /* Safari 和 Chrome */
  -o-animation: myfirst 5s;         /* Opera */
}

通過(guò)百分比設(shè)置動(dòng)畫(huà)發(fā)生的時(shí)間 示例

動(dòng)畫(huà)是使元素從一種樣式逐漸變化為另一種樣式的效果见秽。可以改變?nèi)我舛嗟臉邮饺我舛嗟拇螖?shù)讨盒。可以用關(guān)鍵詞 "from" 和 "to"來(lái)設(shè)置動(dòng)畫(huà)變化發(fā)生的時(shí)間步责，其效果等同于 0% 和 100%返顺。0% 是動(dòng)畫(huà)的開(kāi)始禀苦，100% 是動(dòng)畫(huà)的完成。為了得到最佳的瀏覽器支持遂鹊，應(yīng)該始終定義 0% 和 100% 選擇器振乏。

/* 當(dāng)動(dòng)畫(huà)為 25% 及 50% 時(shí)改變背景色，然后當(dāng)動(dòng)畫(huà) 100% 完成時(shí)再次改變 */
@keyframes myfirst{
  0%   {background: red;}
  25%  {background: yellow;}
  50%  {background: blue;}
  100% {background: green;}
}

/* 同時(shí)改變背景色和位置 */
@keyframes myfirst{
  0%   {background: red; left:0px; top:0px;}
  25%  {background: yellow; left:200px; top:0px;}
  50%  {background: blue; left:200px; top:200px;}
  75%  {background: green; left:0px; top:200px;}
  100% {background: red; left:0px; top:0px;}
}

動(dòng)畫(huà)屬性詳解

animation是除了 animation-play-state屬性所有動(dòng)畫(huà)屬性的簡(jiǎn)寫(xiě)屬性秉扑。

語(yǔ)法： animation : animation-name | animation-duration | animation-timing-function | animation-delay | animation-iteration-count | animation-direction

/* 應(yīng)用的動(dòng)畫(huà)為myfirst慧邮，一個(gè)動(dòng)畫(huà)周期為5秒，動(dòng)畫(huà)的速度曲線為linear舟陆，動(dòng)畫(huà)2秒后播放误澳，播放次數(shù)為infinite，即無(wú)限循環(huán)秦躯，動(dòng)畫(huà)下一周期是否逆向播放取值alternate忆谓，即逆向播放 */
div{
  animation: myfirst 5s linear 2s infinite alternate;
  /* Firefox: */
  -moz-animation: myfirst 5s linear 2s infinite alternate;
  /* Safari 和 Chrome: */
  -webkit-animation: myfirst 5s linear 2s infinite alternate;
  /* Opera: */
  -o-animation: myfirst 5s linear 2s infinite alternate;
}

|屬性|描述|
| ------------- |:-------------:| -----:|
|@keyframes|規(guī)定動(dòng)畫(huà)。|
|animation|所有動(dòng)畫(huà)屬性的簡(jiǎn)寫(xiě)屬性踱承，除了 animation-play-state 屬性倡缠。|
|animation-name|規(guī)定 @keyframes 動(dòng)畫(huà)的名稱。|
|animation-duration|規(guī)定動(dòng)畫(huà)完成一個(gè)周期所花費(fèi)的秒或毫秒茎活。默認(rèn)是 0昙沦。|
|animation-timing-function|規(guī)定動(dòng)畫(huà)的速度曲線。默認(rèn)是 "ease"载荔。|
|animation-delay|規(guī)定動(dòng)畫(huà)何時(shí)開(kāi)始盾饮。默認(rèn)是 0。|
|animation-iteration-count|規(guī)定動(dòng)畫(huà)被播放的次數(shù)身辨。默認(rèn)是 1丐谋。|
|animation-direction|規(guī)定動(dòng)畫(huà)是否在下一周期逆向地播放。默認(rèn)是 "normal"煌珊。|
|animation-play-state|規(guī)定動(dòng)畫(huà)是否正在運(yùn)行或暫停号俐。默認(rèn)是 "running"。|
|animation-fill-mode|規(guī)定對(duì)象動(dòng)畫(huà)時(shí)間之外的狀態(tài)定庵。|

九吏饿、CSS3 多列

通過(guò) CSS3夠創(chuàng)建多個(gè)列來(lái)對(duì)文本進(jìn)行布局，就像我們經(jīng)呈哒悖看到的報(bào)紙的布局一樣猪落。

CSS3 創(chuàng)建多列 示例

column-count 屬性規(guī)定元素應(yīng)該被分隔的列數(shù)。

/* 將div中的文本分為3列 */
div{
  column-count:3;
  -moz-column-count:3;        /* Firefox */
  -webkit-column-count:3;     /* Safari 和 Chrome */
}

CSS3 規(guī)定列之間的間隔 示例

column-gap屬性規(guī)定列之間的間隔畴博。

/* 設(shè)置列之間的間隔為 40 像素 */
div{
  column-gap:40px;
  -moz-column-gap:40px;        /* Firefox */
  -webkit-column-gap:40px;     /* Safari 和 Chrome */
}

CSS3 列規(guī)則 示例

column-rule 屬性設(shè)置列之間的寬度笨忌、樣式和顏色規(guī)則。

語(yǔ)法： column-rule : column-rule-width | column-rule-style | column-rule-color

div{
  column-rule:3px outset #ff0000;
  -moz-column-rule:3px outset #ff0000;       /* Firefox */
  -webkit-column-rule:3px outset #ff0000;    /* Safari and Chrome */
}

|屬性|描述|
| ------------- |:-------------:| -----:|
|column-count|規(guī)定元素應(yīng)該被分隔的列數(shù)俱病。|
|column-fill|規(guī)定如何填充列官疲。|
|column-gap|規(guī)定列之間的間隔袱结。|
|column-rule|設(shè)置所有 column-rule-* 屬性的簡(jiǎn)寫(xiě)屬性。|
|column-rule-width|規(guī)定列之間規(guī)則的寬度途凫。|
|column-rule-style|規(guī)定列之間規(guī)則的樣式垢夹。|
|column-rule-color|規(guī)定列之間規(guī)則的顏色。|
|column-span|規(guī)定元素應(yīng)該橫跨的列數(shù)维费。|
|column-width|規(guī)定列的寬度果元。|
|columns|語(yǔ)法 : column-width column-count。|

十犀盟、CSS3 用戶界面

CSS3 resize 示例

在 CSS3中resize 屬性設(shè)置是否可由用戶調(diào)整元素尺寸而晒。

/* 設(shè)置div可以由用戶調(diào)整大小 */
div{ resize:both; overflow:auto;}

CSS3 box-sizing 示例

box-sizing屬性允許您以確切的方式定義適應(yīng)某個(gè)區(qū)域的具體內(nèi)容。

/* 規(guī)定兩個(gè)并排的帶邊框方框 */
div{
  box-sizing:border-box;
  -moz-box-sizing:border-box;        /* Firefox */
  -webkit-box-sizing:border-box;     /* Safari */
  width:50%;
  float:left;
}

CSS3 outline-offset 示例

outline-offset屬性對(duì)輪廓進(jìn)行偏移且蓬，并在超出邊框邊緣的位置繪制輪廓欣硼。

輪廓與邊框有兩點(diǎn)不同：

輪廓不占用空間；
輪廓可能是非矩形恶阴；
/* 規(guī)定邊框邊緣之外 15 像素處的輪廓 */
div{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}

十一诈胜、參考資料
w3school CSS3 教程
CSS3 Border-image