CSS学习笔记(十一) CSS3新特性

这篇文章我们将会介绍 CSS3 中一些常用的新特性

1、选择器

（1）基本选择器

基本选择器	语法	描述
通配选择器	*	选择所有 HTML 元素
元素选择器	E	选择指定类型的 HTML 元素
id 选择器	#id	选择 id 为指定值的 HTML 元素
class 选择器	.class	选择 class 为指定值的 HTML 元素

（2）层次选择器

层次选择器	语法	描述
后代选择器	E F	选择所有 E 的后代元素 F
子代选择器	E>F	选择所有 E 的子代元素 F
相邻兄弟选择器	E+F	选择 E 后面的第一个兄弟元素 F
通用兄弟选择器	E~F	选择 E 后面的所有的兄弟元素 F

（3）属性选择器

语法	描述
[attribute]	选择具有指定属性的元素
[attribute=value]	选择具有指定属性且属性值为 value 的元素
[attribute^=value]	选择具有指定属性且属性值以 value 开头的元素
[attribute$=value]	选择具有指定属性且属性值以 value 结尾的元素
[attribute*=value]	选择具有指定属性且属性值中包含 value 的元素
[attribute~=value]	选择具有指定属性且属性值中包含指定词汇 value 的元素
[attribute|=value]	选择具有指定属性且属性值中包含以指定词汇 value 开头的元素

（4）伪元素

语法	描述
E::first-letter	向文本的第一个字添加特殊样式，只能用于块级元素
E::first-line	向文本的第一个行添加特殊样式，只能用于块级元素
E::before	在元素之前添加特殊样式
E::after	在元素之后添加特殊样式
E::selection	对选中的文本添加特殊样式

（5）伪类

• 动态伪类选择器

语法	描述
E:link	选择未被访问的锚点元素 E
E:visited	选择已被访问的锚点元素 E
E:hover	选择鼠标悬浮的元素 E
E:active	选择已被激活的元素 E
E:focus	选择获得焦点的元素 E

• 元素状态伪类选择器

语法	描述
E:checked	选择已被选中的按钮元素 E
E:enabled	选择启用的表单元素 E
E:disabled	选择禁用的表单元素 E

• 结构伪类选择器

语法	描述
E:first-child	选择作为父元素的第 1 个子元素的元素 E
E:nth-child(n)	选择作为父元素的第 n 个子元素的元素 E
E:last-child	选择作为父元素的最后一个子元素的元素 E
E:only-child	选择作为父元素的唯一一个子元素的元素 E
E:fitst-of-type	选择作为父元素内具有指定类型的第 1 个子元素 E
E:nth-of-type(n)	选择作为父元素内具有指定类型的第 n 个子元素 E
E:last-of-type	选择作为父元素内具有指定类型的最后一个子元素 E
E:only-of-type	选择作为父元素内具有指定类型的唯一一个子元素 E
E:root	选择作为根元素的元素 E，例如 html:root
E:empty	选择没有子元素的元素 E

• 目标伪类选择器

语法	描述
E:target	被指定 URL 指向的元素 E

• 否定伪类选择器

语法	描述
E:not(F)	符合要求 E 但不符合要求 F 的元素

2、颜色

在 CSS3 之前，表示颜色可以使用以下三种方法：

• 关键字表示法，例如黑色可以表示为 black，白色可以表示为 white
• 十六进制格式，例如黑色可以表示为 #000000，白色可以表示为 #FFFFFF
• rgb()，例如黑色可以表示为 rgb(0,0,0)，白色可以表示为 rgb(255,255,255)

而在 CSS3 中，又新增三种方法，分别是：

• hsl()：h 表示色调 (hue)，s 表示饱和度 (saturate)，l 表示亮度 (lightness)
  • hue：数值，取值范围为 0 ~ 359，例如红色为 0，绿色为 120，蓝色为 240
  • saturate：百分比，100% 为实际色调，0% 为灰色
  • lightness：百分比，50% 为实际色调，0% 为黑色，100% 为白色
• rgba()：r 表示红色 (red)，g 表示绿色 (green)，b 表示蓝色 (blue)，a 表示不透明度 (alpha)
  • alpha：百分比，0% 为完全透明，100% 为完全不透明
• hsla()：h 表示色调 (hue)，s 表示饱和度 (saturate)，l 表示亮度 (lightness)，a 表示不透明度 (alpha)

3、阴影

我们既可以为块级元素添加阴影，也可以为文字添加阴影

（1）块级元素阴影

我们可以使用 box-shadow 为块级元素添加阴影

box-shadow: offset-x offset-y blur-radius spread-radius color inset;

• offset-x：水平偏移位置，必需
• offset-y：垂直偏移位置，必需
• blur-radius：模糊距离，可选，指定阴影的模糊程度
• spread-radius：阴影半径，可选，指定阴影的区域大小
• color：阴影颜色，可选，默认值是黑色
• inset：默认情况下设置的阴影是外部阴影，使用 inset 可以将阴影设置为内部阴影

（2）文字阴影

我们可以使用 text-shadow 属性为文字添加阴影

text-shadow: offset-x offset-y blur-radius color;

• offset-x：水平偏移位置，必需
• offset-y：垂直偏移位置，必需
• blur-radius：模糊距离，可选，指定阴影的模糊程度
• color：阴影颜色，可选，默认值是黑色

4、渐变

渐变效果有两种类型，分别是线性渐变（Linear Gradient）和径向渐变（Radial Gradient）

• 线性渐变：渐变效果向下、向右或向对角方向展开
• 径向渐变：渐变效果从中心开始向四周展开

（1）线性渐变

可以将 background-image 属性的值设置为 linear-gradient 添加线性渐变效果

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

• direction：指定渐变方向，下面列举几个常见的值：
  • to bottom：渐变方向从上到下展开，默认值
  • to right：渐变效果从左到右展开
  • to bottom right：渐变方向从左上到右下展开
  • ：水平线和渐变线之间的角度，按逆时针方向计算
• color-stop1, color-stop2, ...：指定渐变颜色

（2）径向渐变

可以将 background-image 属性的值设置为 radial-gradient 添加线性渐变效果

background-image: radial-gradient(shape size at position, color-stop1, color-stop2, ...);

• shape：指定形状，取值分别是 ellipse 和 circle，默认是 ellipse
• size：指定尺寸，取值分别是 closest-side、farthest-side、closest-corner、farthest-corner
• position：中心点的所在位置，它由两个百分数值决定
• color-stop1, color-stop2, ...：指定渐变颜色

5、反射

通过 box-reflect 属性我们可以实现镜面效果

box-reflect：direction offset mask-box-image

• direction：反射方向，取值如下：
  • above：倒影出现在原对象的上方
  • below：倒影出现在原对象的下方
  • left： 倒影出现在原对象的左方
  • right：倒影出现在原对象的右方
• offset：倒影与原对象之间的间距
• mask-box-image：遮罩效果，图片或者渐变

6、字体

@font-face 规则用来加载字体，它甚至可以让我们使用服务端的字体文件，一个例子如下：

@font-face
{
    /* font-family 属性指定字体名称 */
    font-family: myFont;
    /* src 属性指定资源位置 */
    src: url('myFont.ttf'), url('myFont.eot')/* IE9 */;
}

然后就能在文件中直接使用，例子如下：

.use-my-font {
    font-family: myFont; /* 自定义的字体名称 */
}

7、过渡

通过 CSS3，我们可以在不使用 Flash 或 JavaScript 的情况下，使得元素在样式转换时添加过渡效果

使用 transition 属性可以添加过渡效果

transition: property duration timing-function delay;

• property：应用过渡效果的属性名称，当指定的属性改变时，过渡效果开始作用，取值如下：
  • none：表示没有属性获得过渡效果
  • all：表示所有属性获得过渡效果
  • 名称列表：指定获得过渡效果的属性，列表以逗号分隔
• duration：过渡效果的作用时间，其接受一个时间值，默认为 0
• timing-function：过渡效果的速度曲线，取值如下：
  • linear：以相同的速度从开始至结束
  • ease：默认值，以慢速开始，然后变快，以慢速结束
  • ease-in：以慢速开始
  • ease-out：以慢速结束
  • ease-in-out：以慢速开始，以慢速结束
• delay：延迟过渡效果的开始时间，其接受一个时间值，默认为 0

8、动画

通过 CSS3，我们可以在不使用 Flash 或 JavaScript 的情况下，为网页创建动画

可以使用 animation 属性，定义动画属性

animation: name duration timing-function delay iteration-count direction;

• name：动画名称
• duration：动画效果的作用时间，其接受一个时间值，默认为 0
• timing-function：动画效果的速度曲线，取值如下：
  • linear：以相同的速度从开始至结束
  • ease：默认值，以慢速开始，然后变快，以慢速结束
  • ease-in：以慢速开始
  • ease-out：以慢速结束
  • ease-in-out：以慢速开始，以慢速结束
• delay：延迟动画效果的开始时间，其接受一个时间值，默认为 0
• iteration-count：动画的播放次数，取值如下：
  • 数字：表示播放次数，默认为 1
  • infinite：表示无限播放
• direction：动画的播放方向，取值如下：
  • normal：正常播放，默认值
  • alternate：轮流反向播放

然后使用 @keyframes 规则，定义动画如何播放，其原理是将一套 CSS 样式逐渐变换成另一套 CSS 样式

通过百分比定义关键帧，也可以通过关键字 from(0%) 和 to(100%)，并在关键帧中指定 CSS 样式，例子如下：

9、转换

使用 transform 属性，我们可以使得元素变形，包括平移、旋转、缩放和倾斜

• 平移，参数 x、y、z 分别定义沿着 X 轴、Y 轴、Z 轴的移动距离

  translate(x,y)、translate3d(x,y,z)、translateX(x)、translateY(y)、translateZ(z)

• 旋转，参数 x、y、z 分别定义沿着 X 轴、Y 轴、Z 轴的旋转矢量，angle 定义顺时针旋转角度

  rotate(angle)、rotate3d(x,y,z,angle)、rotateX(angle)、rotateY(angle)、rotateZ(angle)

• 缩放，参数 x、y、z 分别定义沿着 X 轴、Y 轴、Z 轴的缩放倍数

  scale(x,y)、scale3d(x,y,z)、scaleX(x)、scaleY(y)、scaleZ(z)

• 倾斜，参数 x-angle、y-angle 分别定义与 X 轴、Y 轴的倾斜夹角，该操作会导致形状发生变化

  skew(x-angle,y-angle)、skewX(x-angle)、skewY(y-angle)

【 阅读更多 CSS 系列文章，请看 CSS学习笔记 】