CSS3的一些新特性
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);