CSS3的一些新特性

nicepainkiller 2014-08-03

   1 box-sizing

   (1)box-sizing: border-box;

    所设置的width和height包括padding和border

   (2)box-sizing: content-box;

    所设置的width和height不包括padding和border,只对content。

   2 background-clip

   (1)background-clip: border-box;

    整个盒模型(content+padding+border)都有背景

   (2)background-clip: padding-box;

    (content+padding)有背景

   (3)background-clip: content-box;

    content有背景

   3 background-origin

   (1)background-origin: border-box;

    从盒模型的border的左上角开始显示背景;

   (2)background-origin: padding-box;

    从盒模型padding的左上角开始显示背景;

   (3)background-origin: content-box;

    从盒模型content的左上角开始显示背景;

   4 background-size: wwpx hhpx;

    设置背景的大小

   5 旋转

    设置旋转的角度:

    transform: rotate(90deg);

    设置旋转的圆心:

    transform-origin: center center

    缩放:

    scale:

    scaleX:

    scaleY:

    scaleZ:

    移位:

    transform: translate(50px, -4em);

相关推荐

ganyouxianjava / 0评论 2012-05-31