CSS3新特性一個小結。
邊框
border-radius | box-shadow | border-image
背景
background-size ?CSS3 之前，背景圖片的尺寸是由圖片的實際尺寸決定的
background-origin: border-box | padding-box | content-box?
? ? ? ? ? ? ? ? ? ? ? ? ? ?背景圖片的定位區域,并非繪制區域，還是繪制整個盒模型
background-clip 背景的繪制區域
background-image: url(url1), url(url2) ?為元素使用多個背景圖像
文本
text-shadow | word-wrap(break-word)
字體
@font-face{
? ? font-family: myFirstFont;
? ? src: url('Sansation_Bold.ttf'), url('Sansation_Bold.eot');/* IE9+ */
? ? font-weight:bold;
}
2D轉換
transform: translate(px, px) | rotate(deg) | scale(2,4) | skew(deg, deg)
3D轉換
rotateX(deg) | rotateY(deg)
過渡
CSS3 過渡是元素從一種樣式逐漸改變為另一種的效果。
要實現這一點，必須規定兩項內容
-規定您希望把效果添加到哪個 CSS 屬性上
-規定效果的時長
div?{
width:100px;
height:100px;
background:yellow;
transition:width 2s, height 2s, transform 2s;
}
div:hover{
width: 200px;
height: 200px;
transform: rotate(180deg);
}
動畫
使用關鍵詞from | to或者百分比0%-100%來規定變化發生的時間
@keyframes myfirst?{
from {
background:red;
left:...;
top:...
}
to {background:yellow;...}
}
捆綁到選擇器上
div {
animation: myfirst 5s;
}
過渡 vs 動畫
transition過渡綁定已經存在的css屬性；animation動畫綁定@keyframes自定義的動畫。自定義動畫可以規定某個變化發生的時間。
多列
column-count | column-gap | column-rule
用戶界面
resize | box-sizing | outline | outline-offset
