有趣的CSS3新特性

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