CSS3学习总结

不少属性须要考虑设置兼容性：-moz-火狐、-webkit-谷歌，opera

1、CSS3边框

一、border-radius(px):将边框四个角圆化,像素越高越接近圆形

二、border-shadow(阴影移动向右px  阴影移动向下px  阴影宽度px  阴影颜色)：设置阴影

三、border-image：拉升边框图片

2、背景

一、background-origin：图片可放置于content-box、padding-box、border-box

二、background-size：可设置百分比及px

三、background-image:url(),url()~~：可设置多重图片

3、文本效果

一、text-shadow（水平阴影px、垂直阴影px、模糊距离px，以及阴影的颜色)

二、{word-wrap:break-word}容许对长的不可分割的单词进行分割并换行到下一行；

三、word-break：normal|break-all|keep-all  换行

四、text-wrap：normal|none|unrestricted|suppress;

五、使用须要的字体：@font-face{font-family=“qwe”  src=url（“字体的路径”）}

如需为 HTML 元素使用字体，可经过 font-family 属性来引用字体的名称 (qwe)：

4、2D转换及3D转化

一、2D——transform：translate(px) ：移动   3D——transform：translateX(px) /translateY(px) 

二、2D——transform：rotate(deg)：旋转,类比同上

三、2D——transform：scale(倍数)：放大或缩小，类比同上

四、transform：skew(deg)：自身扭曲

五、perpective：px   图形的透视效果

5、过渡

元素从一种样式逐渐改变为另外一种的效果

-transition-property：XX   改变属性，例如width

-transition-duration：XX  持续时间

-transition-timing-function：XX  时间曲线，例如linear匀速，ease慢速  ease in慢速进入 ease out 慢速退出 ease-in-out慢入慢出

-transition-delay：XX 延迟开始时间

以上有复合结构，可写成transition（顺序与上顺序同）

6、动画

-@keyframes：定义动画

-animation：全部动画属性的简写属性，除了 animation-play-state 属性。

-animation-name，

-animation-duration：意思同过渡内容差很少

-animation-timing-function：意思同过渡内容差很少

-animation-delay：意思同过渡内容差很少

-animation-iteration-count: infinite  播放次数，infinite是无限次

-animation-direction 在下一周期逆向播放

-animation-play-state：动画在运行仍是暂定，通常选择running

animation也可写成复合结构