css3新特性

强大的选择器

允许在标签中指定特定的HTML元素，而不必使用多余的类、ID、或者js脚本。
高级选择器可以避免在标签中添加大量的class、id属性，从而更加简洁和轻量，更方便于维护。

半透明度效果

RGBA和HSLA不仅可以设定色彩，还能设定元素的透明度。
另外还可以使用opacity属性定义元素的不透明度。

扩展知识：

RGBA是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha的色彩空间。
alpha通道一般用作不透明度参数。如果一个像素的alpha通道数值为0%，那它就是完全透明的（也就是看不见的），而数值为100%则意味着一个完全不透明的像素（传统的数字图像）。在0%和100%之间的值则使得像素可以透过背景显示出来，就像透过玻璃（半透明性），这种效果是简单的二元透明性（透明或不透明）做不到的。
HSLA(H,S,L,A)：
H：

Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360

S：

Saturation(饱和度)。取值为：0.0% - 100.0%

L：

Lightness(亮度)。取值为：0.0% - 100.0%

A：

Alpha透明度。取值0~1之间。

多栏布局

不必使用多个div标签就能实现多栏布局，让文本实现纸质报纸的多栏结构。

多背景图

允许背景属性设置多个属性的值，如background-image、background-repeat、background-size、background-position、background-originand、background-clip等，这样就可以载元素上添加多层背景图片。同时，可以实现圆角、背景重叠等设计复杂的网页效果。

文字阴影

text-shadow在CSS2中就已经存在，但并未被广泛应用。CSS3重新定义了它，提供了一种新的跨浏览器的方案使文字看起来更醒目。

开放字体类型

@font-face在CSS2中就已经被引入，但没有像其他CSS3那样被广泛使用，这主要是因为字体的授权和版权问题（嵌入的字体很容易从网上下载到）。

圆角

border-radius属性不需要背景图片就能实现圆角的效果。

边框图片

border-image允许在元素的边框上设定图片，使得原本单调的边框样式变得丰富。我们也可以明确定义一个边框应该如何缩放或平铺。

盒子阴影

box-shashow可以为HTML元素添加阴影，而不需要使用额外的标签或背景图片。text-shashow属性能增强设计的细节，但并不影响内容的可读性，也不会影响页面布局。

媒体查询

media query ， 可以用于为不同的显示设备定义相适配的样式。因而不用单独为不同的设备编写样式表，也不需要使用JavaScript脚本来确定用户浏览器的属性和功能，从而实现灵活的、更加流行的智能流体布局，以便满足用户浏览器分辨率的多样化要求。

本文出自 “isymu” 博客，请务必保留此出处http://isymu.blog.51cto.com/1460577/1663207