首页 > 技术文章 > CSS3学习总结

yyt-caroline 2015-10-25 23:18 原文

很多属性需要考虑设置兼容性:-moz-火狐、-webkit-谷歌,opera

一、CSS3边框

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

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

3、border-image:拉升边框图片

二、背景

1、background-origin:图片可放置于content-box、padding-box、border-box

2、background-size:可设置百分比及px

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

三、文本效果

1、text-shadow(水平阴影px、垂直阴影px、模糊距离px,以及阴影的颜色)

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

3、word-break:normal|break-all|keep-all  换行

4、text-wrap:normal|none|unrestricted|suppress;

5、使用需要的字体:@font-face{font-family=“qwe”  src=url(“字体的路径”)}

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

四、2D转换及3D转化

1、2D——transform:translate(px) :移动   3D——transform:translateX(px) /translateY(px) 

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

3、2D——transform:scale(倍数):放大或缩小,类比同上

4、transform:skew(deg):自身扭曲

5、perpective:px   图形的透视效果

五、过渡

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

-transition-property:XX   改变属性,例如width

-transition-duration:XX  持续时间

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

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

以上有复合结构,可写成transition(顺序与上顺序同)

六、动画

-@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也可写成复合结构

推荐阅读