CSS3新特性罗列
接觸CSS3這么久了，總是到要用的時候直接拿來用，卻沒有好好地總結歸納一下，那就在這里好好梳理一下吧。
CSS3邊框：
圓角邊框：
關鍵：border-radius
<!DOCTYPE html> <html> <head> <style> div { text-align:center; border:2px solid #a1a1a1; padding:10px 40px; width:350px; border-radius:25px; -moz-border-radius:25px; -webkit-border-radius:25px; } </style> </head> <body><div>圓角邊框</div></body> </html>?
CSS3邊框陰影：
關鍵：box-shadow
語法：對象選擇器 {box-shadow:[投影方式,] X軸偏移量,Y軸偏移量[,陰影模糊半徑][,陰影擴展半徑][,陰影顏色]}
投影方式：此參數可選。如不設值，默認投影方式是外陰影；如取其唯一值“inset”，其投影為內陰影；
X-offset:陰影水平偏移量，其值可以是正負值。如果值為正值，則陰影在對象的右邊，其值為負值時，陰影在對象的左邊；
Y-offset:陰影垂直偏移量，其值也可以是正負值。如果為正值，陰影在對象的底部，其值為負值時，陰影在對象的頂部；
陰影模糊半徑：此參數可選，但其值只能是為正值，如果其值為0時，表示陰影不具有模糊效果，其值越大陰影的邊緣就越模糊；
陰影擴展半徑：此參數可選，其值可以是正負值，如果值為正，則整個陰影都延展擴大，反之值為負值時，則縮小；
陰影顏色：此參數可選。如不設定顏色，瀏覽器會取默認色，但各瀏覽器默認取色不一致，特別是在webkit內核下的safari和chrome瀏覽器下表現為透明色，在Firefox/Opera下表現為黑色（已驗證），建議不要省略此參數。
?
?
CSS3邊框圖片：
?關鍵：-webkit-border-image
?比如：
div { border-image:url(border.png) 30 30 round; -moz-border-image:url(border.png) 30 30 round; /* Firefox */ -webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */ -o-border-image:url(border.png) 30 30 round; /* Opera */ }?
CSS3背景：
background-size 屬性規定背景圖片的尺寸
div { background:url(bg_flower.gif); -moz-background-size:63px 100px; /* 老版本的 Firefox */ background-size:63px 100px; background-repeat:no-repeat; }background-origin 屬性規定背景圖片的定位區域
div { background:url(bg_flower.gif); background-repeat:no-repeat; background-size:100% 100%; -webkit-background-origin:content-box; /* Safari */ background-origin:content-box; }CSS3多重背景圖片
body { background-image:url(bg_flower.gif),url(bg_flower_2.gif); }?
CSS3文字效果
CSS3文本陰影
h1 { text-shadow: 5px 5px 5px #FF0000; }CSS3自動換行
p {word-wrap:break-word;}在新的 @font-face 規則中，您必須首先定義字體的名稱（比如 myFirstFont），然后指向該字體文件。
如需為 HTML 元素使用字體，請通過 font-family 屬性來引用字體的名稱 (myFirstFont)：
<style> @font-face { font-family: myFirstFont; src: url('Sansation_Light.ttf'),url('Sansation_Light.eot'); /* IE9 */ }div { font-family:myFirstFont; } </style>?
CSS3 2D轉換
平移：translate
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
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
通過 scale() 方法，元素的尺寸會增加或減少，根據給定的寬度（X 軸）和高度（Y 軸）參數：
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
通過 skew() 方法，元素翻轉給定的角度，根據給定的水平線（X 軸）和垂直線（Y 軸）參數：
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 */ }?
CSS3 3d轉換
rotateX()
沿著X軸旋轉
rotateY()
沿著Y軸旋轉
?
CSS3過渡
通過 CSS3，我們可以在不使用 Flash 動畫或 JavaScript 的情況下，當元素從一種樣式變換為另一種樣式時為元素添加效果（平緩過渡）。
向寬度、高度和轉換添加過渡效果：
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; }?
總結：
需要給定一個起點狀態和結束狀態，
然后給div添加transition:寬 過渡時間，高 過渡時間，轉換 過渡時間
transition:[寬 過渡時間][,高 過渡時間][,轉換 過渡時間]?
CSS3 動畫
設定動作@keyframes
@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;} }設定動作類
.myaction{animation:myfirst 5s;
}
將動作類加給DIV
$("...").addClass('.myaction');注意：
語法：
animation:name duration timing-function delay iteration-count directionname:@keyframes的名稱
duration:規定完成動畫所花費的時間，以秒或毫秒計。
timing-function:規定動畫的速度曲線。
| timing-function的值 | 描述 |
| linear | 勻速 |
| ease | 慢快慢 |
| ease-in | 低速開始 |
| ease-out | 低速結束 |
| ease-in-out | 低速開始和結束 |
| cubic-bezier(n,n,n,n) | 在cubic-bezier函數中自己的值，從0到1 |
?
?
?
?
?
?
?
delay：動畫開始之前的延遲，秒。
iteration-count:規定動畫播放的次數：具體數值或infinite（無限次）。
direction:規定是否輪流反向播放動畫。normal正常播放，alternate輪流反向播放。
?
CSS3多列：
創建多個列對文本進行布局
div { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari 和 Chrome */ column-count:3; }?
CSS3用戶界面
div { border:2px solid; padding:10px 40px; width:300px; resize:both; overflow:auto; }?
CSS3的新特性就梳理到這里啦。個人覺得轉換和動畫是重點，需要好好掌握。
?
總結
- 上一篇： 使用prismjs为网站添加代码高亮功能
- 下一篇： Flexible 弹性盒子模型之CSS