css3总结

1、常见新增属性

border-radius、border-image、box-shadow、

background-image、background-size、background-Origin(border-box;padding-box;content-box)、background-clip(border-box;padding-box;content-box)

Linear Gradients(兼容问题)、Radial Gradients

transparent、rgba

text-shadow、text-overflow(ellipsis结合overflow:hidden)、word-wrap(换行)、word-break

@font-face 

2、优雅降级和渐进增强（向下兼容和向上兼容）

渐进增强的写法相当于向上兼容：针对低版本浏览器进行构建页面，保证最基本的功能，
然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
正常css3写法覆盖前缀css3，多采用渐进增强写法是未来趋势
.transition { /*渐进增强写法*/
  -webkit-transition: all .5s;
     -moz-transition: all .5s;
       -o-transition: all .5s;
          transition: all .5s;
}



优雅降级的写法类似于向下兼容：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
前缀css3写法覆盖正常css3
.transition { /*优雅降级写法*/
          transition: all .5s;
       -o-transition: all .5s;
     -moz-transition: all .5s;
  -webkit-transition: all .5s;
}

3、兼容写法（推荐自动化插件：Autoprefixer CSS）

-webkit- ，针对safari，chrome浏览器的内核CSS写法
-moz-，针对firefox浏览器的内核CSS写法
-ms-，针对ie内核的CSS写法
-o-，针对Opera内核的CSS写法
* ie6,ie7可以识别；
_和- ，ie6可以识别；
!important,表示高优先级，ie7及以上，firefox都支持，ie6认识带!important的样式属性，但不认识!important的优先级；

4、转换：transform:https://blog.csdn.net/qq_35142645/article/details/84201652

5、过渡：transition(transition-property,transition-duration,transition-timing-function,transition-delay)

transition-property(必需属性)：需要过渡的属性值
transition-duration（必需属性）：效果过渡的时长
transition-timing-function（可选）：过渡效果时间曲线
transition-delay（可选）：过渡效果延时多久触发


常见添加伪类:hover触发,在伪类中添加需要变化的属性，如果需要过渡就将该属性值添加到transition-property

6、动画：@keyframes+animation

@keyframes name{}
from to或百分比规定动画样式变化，0%表示动画变化开始样式，100%表示动画变化结束样式

animation: name duration timing-function delay iteration-count direction fill-mode;

name:动画名称
duration：动画时长
timing-function：动画速度曲线
delay：动画延迟多久后触发
iteration-count：动画播放次数,infinite表示动画一直播放
direction：动画是否在下一周期逆向地播放
fill-mode:规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式

7、多列属性

column-count:列数
column-gap：列与列之间的距离
column-rule-style：列与列之间的边框样式solid、dashed……此类
column-rule-width：列与列之间的边框宽度
column-rule-color：列与列之间的边框颜色
column-rule：列与列之间边框（rule-width rule-style rule-color）
column-span：指定文字跨越列数为1列或是所有列
column-width：指定列宽宽度

8、多媒体查询尺寸

@media screen and (min-width:1200px)大型屏幕

@media screen and (min-width:992px)中等屏幕

@media screen and (min-width:768px)平板

@media screen and (min-width:480px)手机