• CSS Selector Reference
• CSS3 选择器——基本选择器
• CSS3 选择器——属性选择器
• CSS3 选择器——伪类选择器
• 这30类 CSS 选择器，你必须理解

本文标题虽然取了 CSS3学习之选择器 ，但不会只说CSS3新增的选择器；除了CSS3新增选择器外，还会将自己不熟悉的选择器都介绍和测试一下

目前在CSS中一共定义了52种选择器。

• CSS Animations
• CSS3 Animation

CSS3中的 Animation 可以让我们脱离Flash/js/jQuery等作一些简单的动画效果，虽然相对来说可能粗糙一些；另外，与HTML5中的canvas绘制的动画不同，CSS3的 Animation 效果只能应用在已存在的HTML DOM元素上。

CSS3 Animations

CSS动画实际上就是将计算得到的属性值应用到目标元素上，在整个动画的执行过程中，属性值的计算由动画控制，计算得到的属性值会覆盖普通样式系统（如CSS样式）先前的定义，动画会覆盖所由的样式规则，除了指定了 !important 的样式。

CSS3动画涉及到两个CSS属性：animation 和 @keyframes ，它们的浏览器兼容情况如下表所示：

• CSS3 transitions
• CSS3 Transition

W3C 标准中对 css3 的 transition 这是样描述的：“css的 transition 允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。”

CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration.

transition 属性

在CSS3中，我们可以在不使用Flash和JavaScript的情况下，在元素从一种样式变为另一种样式时添加过渡效果。transition 是一个简写属性，它用来设置以下四个属性：

transition 属性语法如下：

1

transition: property duration timing-function delay;

transition 属性的四个属性值分别对应上面表格中四个单独属性，下面会对四个属性分别介绍；transition 属性可以对一个元素同时应用多个过渡效果，多个过渡效果之间用逗号分隔，后面 使用 CSS3 Transitions 部分有相关示例，代码与演示效果联合起来更容易理解。

浏览器兼容性

CSS3 3D Transform 涉及到的属性浏览器兼容性如下：

• CSS3 3D Transform
• Transform-style和Perspective属性
• CSS3 3D transform变换不过如此

CSS3 3D Transform

三维变换使用基于二维变换的相同属性，如果熟悉了二维变换，我们会发现3D变换的功能和2D变换的功能相当类似。CSS3中的3D变换主要包括以下几种功能函数：

• 3D位移：CSS3中的3D位移主要包括 translateZ() 和 translate3d() 两个功能函数；
• 3D旋转：CSS3中的3D旋转主要包括 rotateX()、rotateY()、rotateZ() 和 rotate3d() 四个功能函数；
• 3D缩放：CSS3中的3D缩放主要包括 scaleZ() 和 scale3d() 两个功能函数；
• 3D矩阵：CSS3中3D变形中和2D变形一样也有一个3D矩阵功能函数 matrix3d()。

与 2D Transform 类似，3D Transform 也可以使用多重变形，他们之间使用空格分隔，语法如下：

1

transform: <transform-function> [<transform-function>]*

浏览器兼容性

transform 和 transform-origin 两个CSS属性与 2D Transform 一样

• CSS3 Transform
• CSS3 2D Transforms

Transform就是转换的意思，通过CSS3转换，我们能够对元素进行移动、缩放、转动或拉伸；CSS3 支持 2D 和 3D 转换。

CSS3 Transform

transform 属性语法

1

transform: none|<transform-function>[<transform-function>]*|initial|inherit;

• none: 表示不进行变换
• <transform-function>：表示一个或多个变换函数，以空格分开；就是说可以同时对一个元素应用多种变换函数。

transform中使用多个变换函数时需要用空格隔开，而不是以往使用叠加效果时所使用的逗号

• CSS3 Shadow Effects
• CSS3的文字阴影—text-shadow
• CSS3 box-shadow

使用CSS3我们可以方便地给文本和元素添加阴影效果，涉及到的属性：

• text-shadow
• box-shadow

浏览器兼容

• CSS3 Web Fonts
• CSS3 Text

CSS3 Web 字体

@font-face 规则

Web字体允许设计者使用用户计算机上没有安装的字体。当你找到（或购买到）希望使用的字体，只需要将字体文件放到你的web服务器上，当需要时它会自动下载到用户计算机上。

你“自己的”字体需要使用 CSS3中的 @font-face 规则来定义。

浏览器兼容

• CSS3 Gradients
• 再说CSS3渐变——线性渐变
• 再说CSS3渐变——径向渐变

一直以来，我们只能使用图形设计软件来实现Web页面中的渐变效果；现在W3C组织将渐变设计收入到CSS3标准中，可以让我们显示两种或多种指定颜色的平滑过渡，使用CSS3渐变后可以减少图片下载所耗费的时间和流量；另外，使用渐变的元素在缩放时会有更好的视觉效果，因为渐变是由浏览器生成的。

最早支持CSS3渐变的是基于Webkit内核的浏览器，随后在Firefox和Opera等浏览器都得到支持，但是众浏览器之间没有统一的标准，用法差异很大。不同的渲染引擎实现渐变的语法也不同，在各浏览器下使用都需要带上自己的前缀，给前端设计师们带来极大的不便。

现在，各大浏览器最新版本已经完全支持W3C的标准语法（见下面的“浏览器兼容情况”部分）。

CSS3定义了以下两种渐变：

• 线性渐变
• 径向渐变

使用CSS3的 border-image 属性，可以设置图片作为元素的边框。

• CSS3 Border Images
• CSS3 边框图片详解
• border-image（边框图像）

浏览器支持