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頁面 (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í)長罗晕,實(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頁面