CSS3（背景样式，文本立体效果，2d3d转换及动画）第八天

背景样式

Background-size  背景大小

cover撑满，先撑满一个方向，再撑满第二个方向

contain不填满

background-origin:padding-box 起始位置为padding

background-origin:border-box起始位置为border

background-origin:content-box起始位置为cotent

background-clip:content-box所显示的区域为content...以此类推

box-sizing:border-box宽度设置总和为content+padding+border

box-sizing:padding-box宽度设置总和为content+padding

box-sizing:congtent宽度设置总和为content

谷歌-webkit- 火狐-moz- IE-ms-   欧朋-o- box-sizing-

文本立体效果

#txt{

text-shadow:

1px1px#eee

2px2px#ddd

3px3px#ccc

4px4px#bbb

5px5px#aaa

6px6px#999}

word-wrap:break-word 自动换行且拆分单词

2d3d转换

transform:translate(x,y),平移

                  rotate(deg)旋转

                  scale(x,y)缩放

                  skeev(deg,deg)倾斜

transition:transform 过渡

                  transform ease慢速

                                    linear匀速 在后面加上1s 或1000ms表示延迟

    3d

前边加.state{transform-style:preserve-3d;

}

动画。。