CSS3新特性

摘要：本文主要介绍了CSS3的一些新特性。

1 简介

1.1 概述

CSS3是CSS2的升级版本，它在CSS2的基础上，新增了很多强大的新功能，从而解决一些实际面临的问题。

CSS3在未来会按照模块化的方式去发展，官方说明：说明文档

CSS3的新特性如下：

• 新增了更加实用的选择器，例如伪类选择器和伪元素选择器等。
• 新增了更好的视觉效果，例如圆角、阴影、渐变等。
• 新增了丰富的背景效果，例如支持多个背景图片，同时新增了若干个背景相关的属性。
• 新增了全新的布局方案，即弹性盒子。
• 新增了Web字体，可以显示用户电脑上没有安装的字体。
• 增强了颜色，例如HSL、HSLA、RGBA几种新的颜色模式，新增控制元素透明度的属性。
• 增加了2D变形和3D变形，例如旋转、扭曲、缩放、位移等。
• 增加动画与过渡效果，让变形更平滑。

1.2 私有前缀

W3C标准所提出的某个CSS特性，在被浏览器正式支持之前，需要根据浏览器的内核，通过私有前缀来使用该CSS特性，在浏览器正式支持该CSS特性后，就不需要私有前缀了。

如下代码中的-webkit-就是私有前缀：

1
2
3
4
5

div {
  width: 400px;
  height: 400px;
  -webkit-border-radius: 20px;
}

常见浏览器私有前缀：

• Chrome浏览器：-webkit-
• Safari浏览器：-webkit-
• Firefox浏览器：-moz-
• Edge浏览器：-webkit-
• Opera浏览器：-o-
• IE浏览器：-ms-

查询CSS3兼容性的网站：caniuse

注意：

• 在编码时，不用过于关注浏览器私有前缀，因为主流浏览器都支持常用的CSS3新特性。
• 即便是为了老浏览器而加前缀，也可以借助现代的构建工具，比如webpack工具，自动添加私有前缀。

2 增强

2.1 新增长度单位

新增长度单位：

• rem：根元素字体大小的倍数，只与根元素字体大小有关，根元素就是html元素
• vw：视口宽度的百分之多少，10vw就是视口宽度的10%
• vh：视口高度的百分之多少，10vh就是视口高度的10%
• vmax：视口宽高中大的那个的百分之多少
• vmin：视口宽高中小的那个的百分之多少

2.2 新增颜色表示

CSS3新增了三种颜色设置方式，分别是RGBA、HSL、HSLA，参考：CSS2入门-5-2-颜色

2.3 新增选择器

CSS3新增的选择器有伪类选择器和伪元素选择器，参考：CSS2入门-3-4-高级选择器

2.4 新增盒子属性

2.4.1 盒子宽高

常用属性：

2.4.2 怪异盒子

常用属性：

2.4.3 盒子阴影

常用属性：

语法：

1

box-shadow: 水平位置 垂直位置 模糊距离 外延值 颜色 inset;

注意：

• 只有先设置blur属性，才能再设置spread属性，只存在spread属性会被当做blur属性。

2.4.4 不透明度

常用属性：

2.5 新增背景属性

2.5.1 背景尺寸

常用属性：

2.5.2 背景原点

常用属性：

2.5.3 背景裁剪

常用属性：

2.5.4 背景附着

常用属性：

2.5.5 颜色渐变

常用属性：

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

/* 线性渐变，默认从上到下渐变 */
background-image: linear-gradient(red,yellow,green);
/* 线性渐变，使用关键词调整渐变方向 */
background-image: linear-gradient(to right top,red,yellow,green);
/* 线性渐变，使用角度调整渐变方向 */
background-image: linear-gradient(30deg,red,yellow,green);
/* 线性渐变，使用像素值调整渐变位置 */
background-image: linear-gradient(red 50px,yellow 100px,green 150px);
/* 径向渐变，默认从圆心四散 */
background-image: radial-gradient(red,yellow,green);
/* 径向渐变，使用关键词调整渐变圆心位置 */
background-image: radial-gradient(at right top,red,yellow,green);
/* 径向渐变，使用像素值调整渐变圆心位置 */
background-image: radial-gradient(at 100px 50px,red,yellow,green);
/* 径向渐变，使用关键字调整渐变形状为正圆 */
background-image: radial-gradient(circle,red,yellow,green);
/* 径向渐变，使用像素值调整渐变半径 */
background-image: radial-gradient(50px 100px,red,yellow,green);
/* 径向渐变，使用像素值调整渐变半径和渐变圆心位置 */
background-image: radial-gradient(50px 100px at 100px 50px,red,yellow,green);
/* 径向渐变，使用像素值调整渐变位置 */
background-image: radial-gradient(red 50px,yellow 100px,green 150px);

2.5.6 复合属性

常用属性：

语法：

1

background: 颜色 图片地址 重复方式 定位 / 尺寸 原点 裁剪方式;

注意：

• 原点和裁剪方式的取值相同，如果只写一个值，则表示都设置，如果写了两个值，前面的是原点，后面的是裁剪方式。
• 尺寸必须写在定位的后面，并且用/分开。

2.5.7 多背景图

CSS3允许元素设置多个背景图片。

示例：

1
2
3
4

background: url(images/bg-lt.png) no-repeat left top,
            url(images/bg-rt.png) no-repeat right top,
            url(images/bg-lb.png) no-repeat left bottom,
            url(images/bg-rb.png) no-repeat right bottom;

2.6 新增边框属性

2.6.1 边框圆角

常用属性：

2.6.2 边框外轮廓

常用属性：

2.7 新增文本属性

2.7.1 文本阴影

常用属性：

语法：

1

box-shadow: 水平位置 垂直位置 模糊距离 颜色;

2.7.2 文本换行

常用属性：

2.7.3 文本溢出

常用属性：

注意：

• 要使得text-overflow属性生效，块容器必须显式定义overflow属性值为非visible的其他值，同时设置white-space属性值为nowrap。

2.7.4 文本修饰

常用属性：

2.7.5 文本描边

常用属性：

注意：

• 文字描边功能仅webkit内核浏览器支持。

2.8 新增字体属性

2.8.1 基本用法

可以通过@font-face指定字体的具体地址，浏览器会自动下载该字体，这样就不依赖用户电脑上的字体了。

基础语法：

1
2
3
4

@font-face {
  font-family: "定制字体";
  src: url('webfont.ttf');
}

兼容语法：

1
2
3
4
5
6
7
8
9
10

@font-face {
  font-family: "定制字体";
  font-display: swap;
  src: url('webfont.eot'); /* IE9 */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('webfont.woff2') format('woff2'),
  url('webfont.woff') format('woff'), /* Chrome, Firefox */
  url('webfont.ttf') format('truetype'), /* Chrome, Firefox, Opera, Safari, Android*/
  url('webfont.svg#webfont') format('svg'); /* IOS 4.1- */
}

2.8.2 定制字体

中文的字体文件很大，使用完整的字体文件不现实，通常针对某几个文字进行单独定制。

可使用阿里Web字体定制工具：阿里Web字体定制

2.8.3 字体图标

好处：

• 相比图片更加清晰，因为字体图标是矢量图，不会在放大后失真。
• 灵活性高，更方便改变大小、颜色、风格等。
• 兼容性好，IE也能支持。

常用字体图标库：

• Font Awesome，优点是版权清晰，缺点是数量比较少，官网地址：Font Awesome
• 阿里图标，优点是数量多，种类多，缺点是版权不清晰，并且需要登录，官网地址：阿里图标官网

2.9 新增对象属性

2.9.1 元素位置

常用属性：

2.5.3 元素裁剪

常用属性：

3 变形

3.1 2D变形

3.1.1 坐标系

在学习2D变形和3D变形之前，需要先了解CSS中的坐标系。

原点：

• 默认在盒子的左上角，包括边框但不包括外边距。

中心：

• 默认在盒子的几何中心，即两条对角线的交点。

维度：

• 坐标原点的横向被看作X轴，正值在坐标原点往右，负值在坐标原点往左。
• 坐标原点的纵向被看作Y轴，正值在坐标原点往下，负值在坐标原点往上。
• 坐标原点垂直于屏幕的方向被看作Z轴，正值是从坐标原点向屏幕外的方向，负值是从坐标原点向屏幕里的方向。

注意：

• 因为行内元素不存在宽度和高度，所以2D和3D对行内元素无效。
• 在3D场景下，因为无法观察Z轴，元素也不存在厚度，所以看到的是元素从3D到2D的投影。

3.1.2 位移

常用属性：

示例：

1
2

transform: translateX(30px) translateY(40px);
transform: translate(50%,50%);

和相对定位的比较：

• 位移与相对定位的相同：都不脱离文档流，不会影响到其它元素。
• 位移与相对定位的区别：位移的百分比值参考的是其自身，相对定位的百分比值参考的是其父元素。
• 浏览器针对位移有优化，处理位移的效率比相对定位更高。

位移配合定位，可实现子元素在父元素中同时水平居中和垂直居中。示例：

1
2
3
4
5
6
7
8
9

.parent {
  position: relative;
}
.child {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

3.1.3 缩放

常用属性：

示例：

1
2

transform: scaleX(50%) scaleY(50%);
transform: scale(50%,50%);

注意：

• 支持负数，如果设为-1会将原来的元素镜像显示，但几乎不用，因为容易产生误解。
• 借助缩放，可实现小于12px的文字。

3.1.4 旋转

常用属性：

示例：

1
2

transform: rotateZ(30deg);
transform: rotate(30deg);

3.1.5 扭曲

常用属性：

示例：

1
2
3

transform: skewX(30deg);
transform: skewY(30deg);
transform: skew(30deg,30deg);

3.1.6 多重变形

常用属性：

示例：

1

transform: translate(50%,50%) scale(50%,50%) rotate(30deg) skew(30deg,30deg);

注意：

• 如果位移前有缩放，位移的距离需要乘以缩放的倍数，尽量将位移写在前面。
• 如果位移前有旋转，旋转的参照中心不会受位移影响，尽量将旋转写在后面。

3.1.7 变形原点

常用属性：

示例：

1

transform-origin: left top;

注意：

• 变形原点对位移的影响是看不出来效果的，对缩放和旋转的影响是能看出来的，将设置的原点作为参照中心。
• 如果只设置了长度值或百分比，则表示X轴，Y轴取中间点，如果只设置了关键字，则根据关键字表示X轴或Y轴，另一个取中间点。

3.2 3D变形

3.2.1 开启3D空间

常用属性：

示例：

1
2
3

.parent {
  transform-style: preserve-3d;
}

3.2.2 设置景深

景深指的是观察者与z=0平面的距离，能让发生3D变形的元素产生透视效果，让元素的投影看起来更加立体。

常用属性：

示例：

1
2
3

.parent {
  perspective: 200px;
}

注意：

1. 如果设置了X轴或Y轴的旋转，可以看到子元素投影受父元素景深的影响。
2. 如果未设置X轴或Y轴的旋转，并且Z轴的位移等于0，相当于2D平面的子元素，不受父元素景深的影响。
3. 如果未设置X轴或Y轴的旋转，并且Z轴的位移大于0，此时子元素在投影前面，随着景深的减少：
   3.1 当景深大于位移时，观察者贴近子元素，子元素投影变大。
   3.2 当景深等于或者小于位移时，观察者贴合子元素，子元素投影消失。
   3.3 当景深小于0时，取值无效，不指定景深，子元素投影相当于2D平面的子元素。
4. 如果未设置X轴或Y轴的旋转，并且Z轴的位移小于0，此时子元素在投影后面，随着景深的减少：
   4.1 当景深大于0时，观察者贴近子元素，子元素投影变小。
   4.2 当景深等于0时，观察者贴合2D平面，子元素投影相当于2D平面的一个点。
   4.3 当景深小于0时，取值无效，不指定景深，子元素投影相当于2D平面的子元素。

3.2.3 设置透视点位置

透视点位置就是观察者位置，默认的透视点在元素的中心。

常用属性：

示例：

1
2
3

.parent {
  perspective-origin: left top;
}

3.2.4 位移

常用属性：

示例：

1
2

transform: translateZ(30px);
transform: translate3d(50%,50%,30px);

注意：

• 在X轴和Y轴的设置支持长度值和百分比，在Z轴的设置只支持长度值，因为元素没有厚度的概念，无法通过百分比确定具体长度值。
• 只有在父元素的perspective属性值存在且大于0的情况下，才能设置Z轴的位移。
• 当Z轴的位移大于perspective属性值的时候，元素位移到了观察者后面，即观察者看不到元素。

3.2.5 缩放

常用属性：

示例：

1
2

transform: scaleZ(0.5);
transform: scale3d(0.5,0.5,0.5);

注意：

• 在Z轴进行缩放，理论上是对元素的厚度进行缩放，但是元素没有厚度的概念，所以其实是让元素更贴近观察者，效果上类似调整景深。
• 在Z轴放大的效果，类似景深缩小相同倍数的效果，在Z轴缩小的效果，类似景深放大相同倍数的效果。

3.2.6 旋转

常用属性：

示例：

1
2

transform: rotateX(30deg) rotateY(30deg);
transform: rotate3d(1,1,1,30deg);

注意：

• 通过rotate3d设置的前三个值描述的是坐标轴的矢量定义，取值是从0到1的矢量值。
• 即使rotate3d的前三个值超过1的数值，也会进行内部隐式标准化：
  比如rotate3d(9,9,9,30deg)相当于rotate3d(1,1,1,30deg)的效果。
  比如rotate3d(10,1,0.5,30deg)相当于rotate3d(1,0.1,0.05,30deg)的效果。

3.2.7 多重变形

同2D多重变形类似，支持3D参数，建议将位移写前面同时将旋转写后面。

3.2.8 背部可见性

将元素在X轴旋转或者Y轴旋转前显示的一面称为正面，将元素在X轴旋转或者Y轴旋转后显示的一面称为背面。

常用属性：

示例：

1
2
3
4
5
6

<body>
    <div class="box">
        <div class="front">前面的图片在下层</div>
        <div class="back">后面的图片在上层</div>
    </div>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

body {
  perspective: 500px;
}
.box {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 100px auto;
  transform-style: preserve-3d;
}
.box:hover {
  transform: rotate3d(0,1,0,180deg);
}
.box>div {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 300px;
}
.front {
  background-color: pink;
}
.back {
  background-color: coral;
  /* 预先旋转显示下层元素 */
  transform: rotateY(180deg);
  /* 给上层元素设置背面不可见 */
  backface-visibility: hidden;
}

注意：

• 父元素作为盒子，两个子元素分别表示前面和后面，开启定位让两个子元素在同一位置，后面元素在前面元素上层，并且不会随父元素旋转而改变。
• 上层元素预先旋转：上层元素在父元素旋转前显示正面，上层元素在父元素旋转后显示背面。所以先将上层元素进行旋转显示背面，这样在父元素旋转后就能显示正面。
• 上层元素背面不可见：将上层元素进行旋转，并且上层元素的背面不可见后，显示下层元素的正面，父元素旋转后，上层元素显示正面，挡住了下层元素，所以下层元素背面是否可见是不影响的。

4 过渡

过渡可以在不使用Flash动画，不使用JavaScript的情况下，让元素从一种样式平滑过渡为另一种样式。

常用属性：

注意：

1. 不是所有的属性都能过渡，值为数字，或者值能转为数字的属性，都支持过渡，否则不支持过渡。
2. 常见的支持过渡的属性有：
   颜色
   长度值
   百分比
   z-index
   opacity
   2D变形属性
   3D变形属性
   阴影

步进函数：

• 第一个参数是正整数，指定函数的步数。
• 第二个参数是start或end，指定每一步的值发生变化的时间点，默认值为end。

贝塞尔曲线：

• 英文名是Bezier Curve，又称贝兹曲线或贝济埃曲线，可以通过二维坐标系描述曲线。
• 在线制作贝赛尔曲线：cubic-bezier

5 动画

5.1 帧和关键帧

一段动画，就是一段时间内连续播放多个画面，每一张画面称为一帧。同样时间内，播放的帧数越多，画面看起来越流畅。

关键帧指的是，在构成一段动画的若干帧中，起到决定性作用的2-3帧，可以理解为和前后有明显差别的帧。

早期要求1秒内最低24帧，现在主流使用的是60帧，对延迟要求高的应用要求120帧或者更高。

5.2 基本使用

5.2.1 定义动画

定义动画实际上指的是定义一组关键帧，使用@keyframes设置动画名，可以定义多个动画名，但动画名不可以重复。

有两种方式：

1. 简单方式定义：

   1 2 3 4 5 6 7 8 9 10

   @keyframes 动画名 { from { /*property1:value1*/ /*property2:value2*/ } to { /*property1:value1*/ /*property2:value2*/ } }

2. 完整方式定义：

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

   @keyframes 动画名 { 0% { /*property1:value1*/ } 20% { /*property1:value1*/ } 40% { /*property1:value1*/ } 60% { /*property1:value1*/ } 80% { /*property1:value1*/ } 100% { /*property1:value1*/ } }

5.2.2 给元素应用动画

常用属性：

示例：

1
2
3
4
5
6
7
8

.box {
  /* 指定动画 */
  animation-name: testKey;
  /* 设置动画所需时间 */
  animation-duration: 5s;
  /* 设置动画延迟 */
  animation-delay: 0.5s;
}

5.3 动画的其他属性

常用属性：

5.4 复合属性

常用属性：

注意：

• 设置动画的播放状态的animation-play-state属性一般单独使用，复合使用会导致动画重新播放。

和过渡的区别：

1. 动画不需要事件触发，过渡需要触发。
2. 过渡只有开始和结束两个关键帧，动画可以设置多个关键帧，可以进行更细力度的控制。

6 多列布局

专门用于实现类似于报纸的布局。

分列数量相关属性：

分列边框相关属性：

分列其他属性：

注意：

• 除了column-span属性要在跨列的元素上设置，其他属性都是在父元素上设置的。

7 弹性盒子

7.1 简介

2009年，W3C提出了一种新的盒子模型，即弹性盒子（Flexible Box），也称为伸缩盒模型，它可以轻松的控制：元素分布方式、元素对齐方式、元素视觉顺序、等等。

截止目前，除了在部分IE浏览器不支持，其他浏览器均已全部支持。

弹性盒子的出现，逐渐演变出了一套新的布局方案，即弹性布局，也称为Flex布局。

布局方式：

7.2 弹性容器和弹性项目

将元素的display属性设为flex或者设为inline-flex就可以将该元素变为弹性容器，其子元素（不包括后代元素）会变为弹性项目。

无论原来是哪种元素（块、行内块、行内），一旦成为了弹性项目，全都会块状化，如果没有设置宽度和高度，默认由内容撑开。

7.3 主轴与侧轴

概念：

• 主轴：项目沿主轴排列，默认方向是水平从左到右。
• 侧轴：与主轴垂直的就是侧轴，默认方向是垂直从上到下。

主轴换行相关属性：

水平对齐相关属性：

垂直对齐相关属性：

垂直对齐显示逻辑：

• 对于设置换行但是没有超出容器的项目，将容器高度减去每行项目的最大高度，得到的剩余高度按照行数平均分开，和每行项目的最大高度一起作为行高。
• 使用align-items属性将每行最大高度和剩余平均高度作为行高，可以控制项目在行高里的垂直对齐，不能控制每行在容器里的垂直对齐。
• 使用align-content属性将每行最大高度作为行高，可以控制每行在容器里的垂直对齐，不能控制项目在行高里的垂直对齐。并且只有设置换行，该属性才会生效，即单行无效。

同时水平居中和垂直居中：

1. 在父元素开启弹性布局后，在父元素中设置水平居中和垂直居中。示例：

   1 2 3 4 5 6

   .outer { display: flex; justify-content: center; align-items: center; align-content: center; }

2. 在父元素开启弹性布局后，在子元素中设置外边距自动。示例：

   1 2 3 4 5 6 7 8 9

   .outer { display: flex; justify-content: center; align-items: center; align-content: center; } .inner { margin: auto; }

7.4 基准长度

常用属性：

基准长度显示规则：

• 默认情况下，以内容作为宽度显示。
• 如果设置项目宽度，以项目宽度显示。
• 如果设置项目宽度，又设置基准长度，如果内容长度小于基准长度，以基准长度显示，如果内容长度大于基准长度，比较项目宽度和内容长度，以最小值显示。

按权重放大规则：

• 默认为0，表示不放大。
• 如果所有项目设置为1，计算公式：

  1	项目放大的长度=剩余长度×(1÷项目数量)

• 如果项目设置的不同，计算公式：

  1	项目放大的长度=剩余长度×(当前权重÷{(每个项目权重)求和})

按权重缩小规则：

• 默认为1，表示如果项目长度超出，就按权重缩小项目长度，计算公式：

  1	项目缩小的长度=超出长度×[(1×项目长度)÷{(1×每个项目长度)求和}]

• 如果项目设置的不同，计算公式：

  1	项目缩小的长度=超出长度×[(当前权重×项目长度)÷{(每个项目权重×每个项目长度)求和}]

7.5 单独对齐

常用属性：

7.6 项目排序

常用属性：

8 BFC

BFC，即块级格式化上下文（Block Formatting Context），可以理解为一种功能，当某些情况下元素满足条件时开启。

开启BFC的元素所具有的特点：

• 元素开启BFC后，其子元素不会再产生外边距塌陷问题。
• 元素开启BFC后，元素自身不会被其他浮动元素所覆盖。
• 元素开启BFC后，就算其子元素浮动，元素自身高度也不会塌陷。

开启BFC的方式：

• 根元素默认开启。
• 表格相关的元素默认开启。
• 行内块元素默认开启。
• 给块元素的overflow属性设置不为visible的值后自动开启。
• 将元素改为浮动元素后自动开启。
• 给元素设置绝对定位或固定定位，称为定位元素后自动开启。
• 弹性布局中的弹性项目自动开启。
• 多列布局中的多列容器自动开启。
• 多列布局中的多列项目，将元素的column-span属性的值设置为all后自动开启。
• 将元素的display属性的值设置为flow-root后自动开启。