深入了解CSS3的相关专业知识

Posted 2021-04-09 web前端技术圈

点击学习：

一、CSS3简介

1、CSS3的现状

(1)浏览器支持程度差，需要添加私有前缀

(2)移动端支持优于PC端

(3)不断改进中

(4)应用相对广泛,逐渐要取代JS动态效果的趋势

2、兼容性

IE9+

Chrome 46+

Firefox 42+

二、新增特性

CSS3的新特征有很多，例如圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现定制字体、多背景图、文字或图像的变形处理(旋转、缩放、倾斜、移动)、多栏布局、媒体查询等。

三、优势评价

1、减少开发成本与维护成本

在CSS3出现之前，开发人员为了实现一个圆角效果，往往需要添加额外的html标签，使用一个或多个图片来完成，而使用CSS3只需要一个标签，利用CSS3中的border-radius属性就能完成。这样，CSS3技术能把人员从绘图、切图和优化图片的工作中解放出来。如果后续需要调整这个圆角的弧度或者圆角的颜色，使用CSS2.1，需要从头绘图、切图才能实现，使用CSS3只需修改border-radius属性值就可快速完成修改。

CSS3提供的动画特性，可让开发者在先实现一些动态按钮或者动态导航时远离javascript，让开发人员不需要花费大量的时间去写脚本或者寻找合适的脚本插件来适配一些动态网站效果。

2、提高页面性能

很多CSS3技术通过提供相同的视觉效果而成为图片的"替代品"，换句话说，在进行Web开发时，减少多余的标签嵌套以及图片的使用数量，意味着用户要下载的内容将会更少，页面加载也会更快。另外，更少的图片、脚本和Flash文件能够减少用户访问Web站点时的HTTP请求数，这是提升页面加载速度的最佳方法之一。而使用CSS3制作图形化网站无需任何图片，极大地减少了HTTP的请求数量，并且提升了页面的加载速度。例如CSS3的动画效果，能够减少对JavaScript和Flash文件的HTTP请求，但可能会要求浏览器执行很多的工作来完成这个动画效果的渲染，这有可能导致浏览器响应缓慢致使用户流失。因此，在使用一些复杂的特效时需要考虑清楚。其实很多CSS3技术能够在任何情况下都大幅提高页面的性能 。

CSS3将完全向后兼容，所以没有必要修改的设计来让它们继续运作。网络浏览器也还将继续支持CSS2 。

觉得本文对你有帮助？请分享给更多人

关注「前端大全」，提升前端技能

点击下方“阅读原文”即可加入web前端HTML5学习群获取前端学习资料