CSS3新特性一個小結(jié)。
邊框
border-radius | box-shadow | border-image
背景
background-size ?CSS3 之前，背景圖片的尺寸是由圖片的實(shí)際尺寸決定的
background-origin: border-box | padding-box | content-box?
? ? ? ? ? ? ? ? ? ? ? ? ? ?背景圖片的定位區(qū)域,并非繪制區(qū)域，還是繪制整個盒模型
background-clip 背景的繪制區(qū)域
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轉(zhuǎn)換
transform: translate(px, px) | rotate(deg) | scale(2,4) | skew(deg, deg)
3D轉(zhuǎn)換
rotateX(deg) | rotateY(deg)
過渡
CSS3 過渡是元素從一種樣式逐漸改變?yōu)榱硪环N的效果。
要實(shí)現(xiàn)這一點(diǎn)，必須規(guī)定兩項(xiàng)內(nèi)容
-規(guī)定您希望把效果添加到哪個 CSS 屬性上
-規(guī)定效果的時長
div?{
width:100px;
height:100px;
background:yellow;
transition:width 2s, height 2s, transform 2s;
}
div:hover{
width: 200px;
height: 200px;
transform: rotate(180deg);
}
動畫
使用關(guān)鍵詞from | to或者百分比0%-100%來規(guī)定變化發(fā)生的時間
@keyframes myfirst?{
from {
background:red;
left:...;
top:...
}
to {background:yellow;...}
}
捆綁到選擇器上
div {
animation: myfirst 5s;
}
過渡 vs 動畫
transition過渡綁定已經(jīng)存在的css屬性；animation動畫綁定@keyframes自定義的動畫。自定義動畫可以規(guī)定某個變化發(fā)生的時間。
多列
column-count | column-gap | column-rule
用戶界面
resize | box-sizing | outline | outline-offset
