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
