CSS3 對(duì)應(yīng)CSS新增特性

盒子模型

盒子模型的 邊框

1、可以有圓角 border-radis

2、可以有圖片 border-image / 當(dāng)然還有圖片填充效果

盒子模型的 陰影

1、box-shadow 任何元素都可以使用陰影

通過陰影，可以實(shí)現(xiàn)立體卡片式 的效果； 用作做文字便簽/圖像的便簽；比如 京東和途牛點(diǎn)評(píng)的卡片貼

2、text-shadow 文本也有了陰影效果

盒子模型的 width/height

1、使用 box-sizing 可以指明 width/height 是指的哪一部分

背景

背景圖片的特效

1、可以支持同時(shí)多個(gè)圖片做為背景疊加，分別做平鋪處理

2、可以控制背景圖片的大小，占滿整個(gè)元素（在2中，只能平鋪等處理）

3、可以控制背景圖片在 盒子模型中的顯示 區(qū)域

增加了很多PS才有的特色功能

1、漸變效果：線性漸變 linear-gradient/radial-gradient 可以指定任意角度，是否重復(fù)，等各種漸變效果

2、圖片濾鏡：實(shí)現(xiàn)各種 飽和度/色彩/模糊 功能的用法

可以自有使用瀏覽器字體外的字體

@font-size

響應(yīng)式布局

多媒體查詢 + 響應(yīng)式圖像 = 響應(yīng)式web頁(yè)面 （PC/移動(dòng)端自適應(yīng)？）

1、通過 @media 多媒體查詢，可以 使用PC的各種瀏覽器調(diào)整； 更可以通過這個(gè)適應(yīng) 移動(dòng)端

2、響應(yīng)式圖像，避免了圖像的擴(kuò)展溢出超過父元素的大小

補(bǔ)充閱讀：響應(yīng)式web，媒體查詢

動(dòng)畫

2D轉(zhuǎn)換 & 過渡

1、通過 2D轉(zhuǎn)換 實(shí)現(xiàn)很多動(dòng)態(tài)效果，最常用的是 translate 沿著x，y軸移動(dòng)元素，比如實(shí)現(xiàn)的 按鈕按下/彈起效果；scale ，圖像從小變大，從大到小的變換。

2、通過使用 transition [屬性] 時(shí)長(zhǎng)，實(shí)現(xiàn)過渡效果

這兩者結(jié)合可以實(shí)現(xiàn)，很多 組件的動(dòng)畫效果。

同時(shí) 2D轉(zhuǎn)換 還可以結(jié)合 動(dòng)畫 實(shí)現(xiàn)類似效果

動(dòng)畫

1、@keyframes donghua 定義動(dòng)畫過渡的多個(gè)樣式，可以是 from to 或者 百分比

2、在 元素樣式中指定 這個(gè)動(dòng)畫 animation:donghua 5s;

彈性盒子布局

新增的布局好像沒啥太多的使用意義？

雜項(xiàng)

文本換行 word-wrap；多列 column-count

總結(jié)就是

1、增加了動(dòng)畫效果：2D轉(zhuǎn)換 過渡 動(dòng)畫

2、增加了顯示立體感：盒子模型的陰影/圓角 背景圖片等等

3、響應(yīng)式web頁(yè)面