IT兄弟连 HTML5教程 CSS3揭秘 CSS3概述

 

对于Web开发者来说，CSS3不只是一门新奇的技术，更重要的是这些全新概念的Web应用给开发人员带来了无限的可能性，也极大地提高了开发效率。我们不必再依赖图片或者JavaScript去完成圆角、多背景、用户自定义字体、3D动画、渐变、盒阴影、文字阴影、透明度等提高Web设计质量的特色应用。

 

1  CSS3在选择器上的支持

CSS3在选择器上的丰富支持使得开发人员可以灵活地控制样式。通过选择器的使用，开发人员不再需要在编辑样式时使用多余的、没有任何语义的class属性，而可以直接将样式与元素绑定起来，利用属性选择器可以很容易地根据属性值的开头或结尾选择某个元素，利用兄弟选择器可以选择同级兄弟节点或紧邻下一个节点的元素，利用伪类选择器可以选择某一类元素，从而节省在网站或Web应用程序设计完成后又要修改样式所花费的时间。

 

2  CSS3在样式上的支持

只要提起CSS3的特性是什么，回答最多的就是“圆角”。不错，圆角这个功能可以让前端布局节约大量的时间和精力去切图拼凑一个圆角。CSS3还支持阴影（盒阴影和文本阴影）和渐变；可以自定义字体（使用@font-face）；对于连续文本换行也新增了一些属性，这既解决了连续英文字符出现页面错位的问题，也不需要后端程序去截取这个连续字符；可以给边框添加背景，支持背景调整大小和背景透明处理。

 

3  CSS3对于动画的支持

CSS3支持的动画类型有：变换、过渡和动画。你可以对特定的属性设置transition和animation的值实现动画效果。

 

4  在实际开发中该如何使用CSS3

首先应遵循一个优雅降级的原则，比如前面谈到的圆角，我们可以针对Firefox和Safari等支持圆角的浏览器应用CSS圆角，而那些不支持CSS圆角的浏览器则显示为直角。其次，对于不支持CSS3的浏览器，可以使用JavaScript脚本来实现。在向用户或企业推广新技术的同时也要关注他们的目标与可行性，不能为了技术而技术。