CSS3新增屬性(xing)
時(shi)間：2018-09-27 來源：未知(zhi)
本文引用地址(zhi)：//fsbing.cn/emb/Column/7564.html
1：CSS3是什么(me)？
CSS3是CSS2的升(sheng)級版本，在CSS2.1的基礎上(shang)增加了很(hen)多功(gong)能(neng)(neng)，目(mu)前來說，大部分主流瀏覽器如Chrome，Firefox，Opera，Safari，360等都已經支(zhi)持大部分的CSS3的功(gong)能(neng)(neng)。
2：CSS3能做什么？
那么CSS3究竟可以(yi)(yi)做到(dao)哪些效(xiao)果(guo)呢？大體總結來說有(you)圖(tu)片圓角，邊框(kuang)，文本和(he)(he)盒模型的(de)陰影設置，2D和(he)(he)3D的(de)轉換(huan)，過渡和(he)(he)動畫(hua)，伸縮布(bu)局(ju)和(he)(he)多(duo)列布(bu)局(ju)。CSS3把很多(duo)以(yi)(yi)前需(xu)要(yao)使用圖(tu)片和(he)(he)腳本來實現(xian)的(de)效(xiao)果(guo)，甚至(zhi)動畫(hua)效(xiao)果(guo)，只需(xu)要(yao)一些簡短(duan)的(de)代碼就可以(yi)(yi)實現(xian)同樣的(de)效(xiao)果(guo)，簡化了前端開發人(ren)員的(de)設計過程，加快頁面載入速度(du)。
3：CSS3效(xiao)果展示
圓角效果
以前(qian)做(zuo)圓角通常要使用固定(ding)的背景(jing)圖片，或(huo)用元素進行(xing)拼(pin)湊(cou)，在CSS3中(zhong)通過border-radius就可以設置圓角。
陰影效果
在CSS3中可以(yi)通過text-shadow和(he)box-shadow分別來給文(wen)字和(he)盒模型設置陰影(ying)效(xiao)果。可以(yi)通過該(gai)屬性快(kuai)速(su)的設置陰影(ying)的效(xiao)果。
漸變效果
CSS3中可以通過漸(jian)(jian)變來實現絢麗的(de)效果，減少圖片的(de)使用，適應性(xing)和擴展性(xing)比(bi)較強。漸(jian)(jian)變分為線性(xing)漸(jian)(jian)變和徑(jing)向漸(jian)(jian)變。
過渡
過渡是(shi)可以實現元素在(zai)不同狀態之間(jian)切換時(shi)能更(geng)加(jia)平(ping)滑細膩，可以用來(lai)制作動(dong)畫效果。
轉換
將元素可(ke)以進行(xing)多(duo)種變(bian)換方式(shi)(shi)，旋(xuan)轉(zhuan)rotate，變(bian)形skew，縮放scale，位移translate等(deng)，并且還可(ke)以通過矩陣的(de)方式(shi)(shi)來進行(xing)設置。結合過渡和(he)動(dong)畫等(deng)，能取(qu)代大(da)量之前只能靠Flash才可(ke)以實現(xian)的(de)效(xiao)果。
動畫
可通過(guo)設置多個節點(dian)來精(jing)確(que)控(kong)制一個或一組動畫，常(chang)用來實現復雜(za)的動畫效果(guo)。
伸縮布局
使(shi)得我們(men)對塊級元素的布局排列變(bian)得十分(fen)靈活(huo)，適(shi)應性(xing)非常強，其強大(da)的伸(shen)縮性(xing)，在響(xiang)應式開中可(ke)以發揮極大(da)的作(zuo)用。
多欄布局
可以讓(rang)你(ni)不用使用多(duo)個div標簽就能實現多(duo)欄(lan)(lan)布局(ju)。瀏覽器解釋這個屬性并(bing)生成多(duo)欄(lan)(lan)，讓(rang)文本實現一個仿報紙的多(duo)欄(lan)(lan)結構(gou)。
