CSS3新增属性

    xiaoxiao2021-03-25  112

    作者:华清远见讲师

    本文引用地址:http://www.embedu.org/Column/7564.html

    1:CSS3是什么?

    CSS3是CSS2的升级版本,在CSS2.1的基础上增加了很多功能,目前来说,大部分主流浏览器如Chrome,Firefox,Opera,Safari,360等都已经支持大部分的CSS3的功能。

    2:CSS3能做什么?

    那么CSS3究竟可以做到哪些效果呢?大体总结来说有图片圆角,边框,文本和盒模型的阴影设置,2D和3D的转换,过渡和动画,伸缩布局和多列布局。CSS3把很多以前需要使用图片和脚本来实现的效果,甚至动画效果,只需要一些简短的代码就可以实现同样的效果,简化了前端开发人员的设计过程,加快页面载入速度。

    3:CSS3效果展示

    圆角效果

    以前做圆角通常要使用固定的背景图片,或用元素进行拼凑,在CSS3中通过border-radius就可以设置圆角。

    阴影效果

    在CSS3中可以通过text-shadow和box-shadow分别来给文字和盒模型设置阴影效果。可以通过该属性快速的设置阴影的效果。

    渐变效果

    CSS3中可以通过渐变来实现绚丽的效果,减少图片的使用,适应性和扩展性比较强。渐变分为线性渐变和径向渐变。

    过渡

    过渡是可以实现元素在不同状态之间切换时能更加平滑细腻,可以用来制作动画效果。

    转换

    将元素可以进行多种变换方式,旋转rotate,变形skew,缩放scale,位移translate等,并且还可以通过矩阵的方式来进行设置。结合过渡和动画等,能取代大量之前只能靠Flash才可以实现的效果。

    动画

    可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。

    伸缩布局

    使得我们对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开中可以发挥极大的作用。

    多栏布局

    可以让你不用使用多个div标签就能实现多栏布局。浏览器解释这个属性并生成多栏,让文本实现一个仿报纸的多栏结构。

    转载请注明原文地址: https://ju.6miu.com/read-22460.html

    最新回复(0)