CSS3 新特性概览

# CSS3 新特性概览

CSS3 常用新特性：包含样式、选择器、颜色渐变、2D/3D转换、动画、布局等。

# 一. CSS3 新特性之样式篇

# 1. 背景

background-origin
- 作用：规定背景图片的定位区域。
- 备注：默认盒子的背景图片是在盒子的内边距左上角对齐设置。

background-origin: padding-box;  /* 背景图像相对内边距定位（默认值） */
background-origin: border-box;  /* 背景图像相对边框定位【以边框左上角为参照进行位置设置】 */
background-origin: content-box;  /* 背景图像相对内容区域定位【以内容区域左上角为参照进行位置设置】 */

1
2
3

background-clip
- 作用：规定背景的绘制区域。

background-clip: border-box;  /* 背景被裁切到边框盒子位置 【将背景图片在整个容器中显示】 */
background-clip: padding-box;  /* 背景被裁切到内边距区域【将背景图片在内边距区域（包含内容区域）显示】 */
background-clip: content-box;  /* 背景被裁切到内容区域【将背景图片在内容区域显示】 */

1
2
3

background-size
- 作用：规定背景图片的尺寸。

background-size: cover;  /* 将背景图片按照原来的缩放比，铺满整个容器 */
background-size: contain;  /* 将背景图片按照原来的缩放比，完整的显示到容器中，不确定是否会将容器填充满 */

1
2

# 2. 边框

box-shadow
- 作用：盒子阴影。

box-shadow: 0px 0px 10px red,
            5px -5px 10px blue;
/*
    第一个 0px，代表阴影在水平方向的偏移量（正数向右，负数向左）
    第二个 0px，代表阴影在垂直方向的偏移量（正数向下，负数向上）
    第三个 10px，代表阴影的模糊度（不能设置负数）
    设置多个阴影，使用逗号隔开
*/

1
2
3
4
5
6
7
8

border-radius
- 作用：边框圆角。

border: 1px solid red;
border-radius: 10px;

1
2

border-image
- 作用：边框图片。

/* 设置边框图片 */
border-image-source: url("2.png");

/* 边框图片裁切 : 不需要带单位*/
border-image-slice: 20;

/* 设置边框图片的平铺方式（stretch 是默认的拉伸，round 和 repeat 都是平铺，在图片不能显示完整处有略微差别，一般推荐 round） */
/* border-image-repeat: stretch; */
border-image-repeat: round;
/* border-image-repeat: repeat; */

border-image-width: 20px;

1
2
3
4
5
6
7
8
9
10
11
12

# 3. 文本

text-shadow
- 作用：设置文本阴影。

/* 同盒子阴影 */
text-shadow: 0px 0px 10px red;

1
2

# 二. CSS3 新特性之选择器篇

# 1. 属性选择器

[属性名=值] {}
[属性名] {}　　　　匹配对应的属性即可
[属性名^=值] {}　　以值开头
[属性名*=值] {}　　包含
[属性名$=值] {}　　以值结束

p[class$="o"] {
  color: red;
}

1
2
3

# 2. 结构伪类选择器

:first-child {}　　　　　选中父元素中第一个子元素
:last-child {}　　　　　选中父元素中最后一个子元素
:nth-child(n) {}　　　　选中父元素中正数第n个子元素
:nth-last-child(n) {}　　选中父元素中倒数第n个子元素

/* 选中 li 标签且该标签必须是父元素中第一个子元素 */
li:first-child {
  color:red;
}
/* 选中 li 标签且该标签必须是父元素中倒数第三个子元素 */
li:nth-last-child(3) {
  color:red;
}

1
2
3
4
5
6
7
8

备注：

n 的取值大于等于0
n 可以设置预定义的值
- odd：选中奇数位置的元素
- even：选中偶数位置的元素
可以是一个表达式：an+b的格式

# 3. 其他选择器

:target　　　　　　被锚链接指向的时候会触发该选择器
::selection　　　　当被鼠标选中的时候的样式
::first-line　　　　选中第一行
::first-letter　　　选中第一个字符

/* 当锚链接指向的时候会触发该选择器 */
p:target {
  color: red;
}
/* 当使用鼠标选中（框选）时候的样式 */
p::selection {
  color: red;
  background-color: green;
}

1
2
3
4
5
6
7
8
9

# 三. CSS3 新特性之颜色渐变

# 1. 线性渐变

需要有三要素：

开始颜色和结束颜色
渐变的方向
渐变的范围

/* 实现线性渐变 */
background-image: linear-gradient(
  to right,
  red,
  blue
);

/* 加百分比实现线性渐变：红色从20%起开始向蓝色渐变 */
background-image: linear-gradient(
  to right,
  red 50%,
  blue
);

1
2
3
4
5
6
7
8
9
10
11
12
13

备注：
表示方向：

to + right | top | bottom | left
通过角度表示一个方向（角度增加，沿顺时针方向渐变）：
a. 0deg 【从下向上渐变】
b. 90deg【从左向右】

# 2. 径向渐变

需要确定圆心位置和半径。

/* 径向渐变 */
background-image: radial-gradient(
  100px at center,
  red,
  blue
);

1
2
3
4
5
6

# 四. 2D转换

# 1. 位移

transform: translate(x,y);
- 备注：位移是相对元素自身的位置发生位置改变。

# 2. 旋转

transform: rotate(60deg);
- 备注：取值为角度，正数代表顺时针旋转，负数代表逆时针旋转。

# 3. 缩放

transform: scale(0.5,1);
- 备注：
  a. 取值为倍数关系，缩小大于0小于1，放大设置大于1。
  b. 取值写一个数时，对宽和高做相同比例缩放；取值为两个数时，前者宽、后者高

# 4. 倾斜

transform: skew(30deg,30deg);
- 备注：
  a. 第一个值代表沿着x轴方向倾斜
  b. 第二个值代表沿着y轴方向倾斜

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .box {
      height: 100px;
      background-color: pink;
    }

    .one {
      width: 100px;
      height: 100px;
      background-color: red;
      margin: 0 auto;
    }

    .box:hover .one {
      /* 2d转换位移：改变元素位置 */
      /* transform: translate(100px, 100px); */

      /* 2d转换旋转：设置的是角度 */
      /* transform: rotate(60deg); */

      /* 2d转换缩放：设置的是倍数 */
      /* transform: scale(0.5, 1); */

      /* 2d转换倾斜：设置的是角度 */
      transform: skew(30deg, 30deg);
    }
  </style>
</head>
<body>
<div class="box">
  <div class="one">demo</div>
</div>
</body>
</html>

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
33
34
35
36
37
38
39

# 五. 3D转换

# 1. 位移

transform: translateX() translateY() translateZ();

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .one {
      width: 500px;
      height: 500px;
      border: 1px solid red;
      margin: 100px auto;

      /* 透视: 在网页中实现近大远小; */
      perspective: 1000px;
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      margin: 200px;
    }

    .one:hover .box {
      transform: translateZ(200px);
    }
  </style>
</head>
<body>
<div class="one">
  <div class="box"></div>
</div>
</body>
</html>

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
33
34

# 2. 旋转

transform: rotateX(60deg) rotateY(60deg) rotateZ(60deg);

# 3. 缩放

transform: scaleX(0.5) scaleY(1) scaleZ(1);

# 4. 倾斜

transform: skewX(30deg) skewY();

# 5. 小案例

transform-style: preserve-3d;

将平面图形转换为立体图形

下面是 3D 转换实现魔方

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    .demo-transform-ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .demo-transform-box {
      width: 300px;
      height: 300px;
      margin: 150px auto;
      position: relative;
      font-size: 50px;
      transform-style: preserve-3d;

      animation: rotate 20s linear infinite alternate;

    }

    .demo-transform-box > div {
      width: 300px;
      height: 300px;
      position: absolute;
    }

    .demo-transform-right {
      background-color: transparent;
      transform: rotateY(90deg) translateZ(150px);
    }
    
    .demo-transform-left {
      background-color: transparent;
      transform: rotateY(-90deg) translateZ(150px);
    }
    
    .demo-transform-top {
      background-color: transparent;
      transform: rotateX(90deg) translateZ(150px);
    }

    .demo-transform-bottom {
      background-color: transparent;
      transform: rotateX(-90deg) translateZ(150px);
    }
    
    .demo-transform-before {
      background-color: transparent;
      transform: translateZ(150px);
    }
    
    .demo-transform-back {
      background-color: transparent;
      transform: translateZ(-150px);
    }
    
    .demo-transform-ul > li {
      float: left;
      width: 90px;
      height: 90px;
      border-radius: 20px;
      margin: 5px;
      text-align: center;
      line-height: 90px;
    }

    .demo-transform-before li {
      background-color: green;
    }
    
    .demo-transform-back li {
      background-color: chartreuse;
    }
    
    .demo-transform-top li {
      background-color: purple;
    }
    
    .demo-transform-bottom li {
      background-color: cornflowerblue;
    }
    
    .demo-transform-left li {
      background-color: darkorange;
    }
    
    .demo-transform-right li {
      background-color: #37ffc7;
    }
    
    .demo-transform-box:hover {
      animation-play-state: paused;
    }

    @keyframes rotate {
      0% {
        transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
      }
    
      20% {
        transform: rotateY(30deg) rotateX(40deg) rotateZ(20deg);
      }
    
      40% {
        transform: rotateY(-60deg) rotateX(-40deg) rotateZ(-20deg);
      }
    
      60% {
        transform: rotateY(145deg) rotateX(80deg) rotateZ(10deg);
      }
    
      80% {
        transform: rotateY(90deg) rotateX(60deg) rotateZ(-20deg);
      }
    
      100% {
        transform: rotateY(135deg) rotateX(-45deg) rotateZ(30deg);
      }
    }
    </style>
</head>

<body>
  <div class="demo-transform-box">
    <div class="demo-transform-before">
      <ul class="demo-transform-ul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
      </ul>
    </div>

    <div class="demo-transform-back">
      <ul class="demo-transform-ul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
      </ul>
    </div>

    <div class="demo-transform-top">
      <ul class="demo-transform-ul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
      </ul>
    </div>

    <div class="demo-transform-bottom">
      <ul class="demo-transform-ul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
      </ul>
    </div>

    <div class="demo-transform-left">
      <ul class="demo-transform-ul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
      </ul>
    </div>

    <div class="demo-transform-right">
      <ul class="demo-transform-ul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
      </ul>
    </div>
    
  </div>
</body>
</html>

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215

# 六. CSS3 新特性之动画篇

# 1. 过渡

过渡又称补间动画，当一个元素从一个状态到另一个状态切换时，中间有个空白，过渡能为这个空白添加一个效果。

过渡主要有几个属性：

transition-property: all;　　　　　　　设置哪些属性要参与到过渡动画效果中：all
transition-duration: 1s;　　　　　　　　设置过渡执行时间
transition-delay: 1s;　　　　　　　　　设置过渡延时执行时间
transition-timing-function: linear;　　设置过渡的速度类型

关于过渡的速度类型，可以点击查看 CSS3中的transition属性详解 (opens new window)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    /* 动画的开始状态：浏览中元素的默认显示效果*/
    .box1 {
      width: 200px;
      height: 200px;
      background-color: red;

      /* 设置哪些属性要参与到过渡动画效果中：all */
      /* transition-property: all; */

      /* 设置过渡执行时间 */
      /* transition-duration: 1s; */

      /* 设置过渡延时执行时间 */
      /* transition-delay: 1s; */

      /* 设置过渡的速度类型 */
      /* transition-timing-function: linear; */

      /* 简写：作用元素，执行时间，速度类型，延时 */
      transition: all 1s linear 1s;
    }

    /* 动画的结束状态 */
    .box1:hover {
      width: 400px;
      height: 400px;
      background-color: green;
    }
  </style>
</head>
<body>
  <div class="box1"></div>
</body>
</html>

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
33
34
35
36
37
38
39
40

# 2. 动画

编写 CSS3 动画有两步：先定义动画集，然后调用。

定义动画集，设置名称和动作

@keyframes  rotate {
  /* 定义开始状态  from也可以用0%表示 */
  from {
    transform: rotateZ(0deg);
  }

  /* 中间可以写一些50%等中间状态 */

  /* 结束状态 to也可以用100%表示 */
  to {
   transform: rotateZ(360deg);
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13

调用

通过 css 选择器选择元素，然后设置动画名称，动画时间，动画执行的次数，动画执行速度类型（同过渡效果）

/* 调用 */
/* 动画名称 */
animation-name: rotate;
/* 设置动画时间 */
animation-duration: 2s;
/* 设置动画执行的次数：infinite无限循环 */
animation-iteration-ount: infinite;
/* 动画执行速度类型：linear匀速 */
animation-timing-function: linear;

1
2
3
4
5
6
7
8
9

注意：如果设置动画集使用的是百分比，那么记住百分比是相对整个动画执行时间的。

在调用的时候也有一些其它的属性可以设置，如下一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .box {
      width: 0px;
      height: 0px;
      border-left: 100px solid yellow;
      border-right: 100px solid red;
      border-bottom: 100px solid green;
      border-top: 100px solid pink;
      border-radius: 50%;

      /* 调用 */
      /* 动画名称 */
      animation-name: rotate;

      /* 设置动画时间 */
      animation-duration: 2s;

      /* 设置动画执行的次数: infinite 无限执行; */
      animation-iteration-count: infinite;

      /* 动画执行的速度类型 */
      animation-timing-function: linear;

      /* 设置动画逆波，设置该属性后动画在返回时不会“瞬移” */
      animation-direction: alternate;

      /* 设置动画延时 */
      animation-delay: 1s;

      /* 设置动画结束时候的状态，该属性生效的前提是动画执行次数不能为 infinite无限执行 */
      animation-fill-mode: forwards;
    }

    .box:hover {
      /* 动画暂停 */
      animation-play-state: paused;
    }

    /* 定义动画集 */
    @keyframes rotate {

      /* 定义开始状态  0%*/
      0% {
        /* transform: rotateZ(0deg); */
        transform: translateX(0px);
      }

      50% {

      }

      /* 结束状态 100%*/
      100% {
        /* transform: rotateZ(360deg); */ /* 旋转动画 */
        transform: translateX(200px); /* 位移动画 */
      }
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

# 七. CSS3 新特性之网页布局篇

这里主要是伸缩布局（或弹性布局），它和响应局布局差不多。

CSS 无非是设置样式、进行网页布局。前面介绍的都是样式，这里开始介绍的就是布局。

# 1. 设置伸缩布局

设置伸缩布局的步骤如下：

设置父元素为伸缩盒子【直接父元素】

display: flex;

为什么在伸缩盒子中，子元素会在一行上显示？

子元素是按照伸缩盒子中主轴方向显示
只有伸缩盒子才有主轴和侧轴
主轴：默认水平从左向右显示
侧轴：始终要垂直于主轴

设置伸缩盒子主轴方向（flex-direction）

flex-direction: row;  /* 默认值 */
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;

1
2
3
4

设置元素在主轴的对齐方式（justify-content）

/* 设置子元素在主轴方向的对齐方式 */
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;

1
2
3
4
5
6

设置元素在侧轴的对齐方式（align-items）

align-items: flex-start;
align-items: flex-end;
align-items: center;
/* 默认值 */
align-items: stretch;

1
2
3
4
5

设置元素是否换行显示（flex-wrap）

在伸缩盒子中所有的元素默认都会在一行上显示

如果希望换行：

flex-wrap: wrap | nowrap;

设置元素换行后的对齐方式（align-content）

align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-around;
align-content: space-between;
/* 换行后的默认值 */
align-content: stretch;

1
2
3
4
5
6
7

# 2. 设置缩放比

需求：让父元素下的三个子元素在一行内实现三等分布局。

方法：父元素设置 display: flex; 属性，给每个子元素设置 flex: 1 属性。

原理：给每个子元素设置 flex: 1 属性后，等于把父元素分成了 3 份，每个子元素占 1 份。如果给其中一个子元素设置成 flex: 2，那么等同于把父元素分成了 4 份，这个子元素占 2 份，另外两个子元素各占 1 份。

这个方式类似于 bootstrap 的栅格布局。

通过 flex 实现类栅格布局的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .box {
      width: 577px;
      height: 100px;
      background-color: pink;
      display: flex;
    }

    .box > div {
      background-color: yellowgreen;
    }

    div.one {
      flex: 1;
      background-color: red;
    }

    div.two {
      flex: 2;
      background-color: blue;
    }

    div.three {
      flex: 1;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
  </div>
</body>
</html>

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
33
34
35
36
37
38
39
40

# 八. 总结

以上介绍的就是 CSS3 最常用的功能，难度不大，只是要记住的属性比较多。不需要考虑兼容问题的话可以多用，一般移动端用的比较多。

#CSS

上次更新: 2022/07/01, 17:34:19

← 要用却记不住的 CSS 属性一文详解主流 CSS 布局→