CSS3 新特性概览
# CSS3 新特性概览
CSS3 常用新特性:包含样式、选择器、颜色渐变、2D/3D转换、动画、布局等。
# 一. CSS3 新特性之样式篇
# 1. 背景
background-origin
- 作用:规定背景图片的定位区域。
- 备注:默认盒子的背景图片是在盒子的内边距左上角对齐设置。
background-origin: padding-box; /* 背景图像相对内边距定位(默认值) */
background-origin: border-box; /* 背景图像相对边框定位【以边框左上角为参照进行位置设置】 */
background-origin: content-box; /* 背景图像相对内容区域定位【以内容区域左上角为参照进行位置设置】 */
2
3
background-clip
- 作用:规定背景的绘制区域。
background-clip: border-box; /* 背景被裁切到边框盒子位置 【将背景图片在整个容器中显示】 */
background-clip: padding-box; /* 背景被裁切到内边距区域【将背景图片在内边距区域(包含内容区域)显示】 */
background-clip: content-box; /* 背景被裁切到内容区域【将背景图片在内容区域显示】 */
2
3
background-size
- 作用:规定背景图片的尺寸。
background-size: cover; /* 将背景图片按照原来的缩放比,铺满整个容器 */
background-size: contain; /* 将背景图片按照原来的缩放比,完整的显示到容器中,不确定是否会将容器填充满 */
2
# 2. 边框
box-shadow
- 作用:盒子阴影。
box-shadow: 0px 0px 10px red,
5px -5px 10px blue;
/*
第一个 0px,代表阴影在水平方向的偏移量(正数向右,负数向左)
第二个 0px,代表阴影在垂直方向的偏移量(正数向下,负数向上)
第三个 10px,代表阴影的模糊度(不能设置负数)
设置多个阴影,使用逗号隔开
*/
2
3
4
5
6
7
8
border-radius
- 作用:边框圆角。
border: 1px solid red;
border-radius: 10px;
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;
2
3
4
5
6
7
8
9
10
11
12
# 3. 文本
text-shadow
- 作用:设置文本阴影。
/* 同盒子阴影 */
text-shadow: 0px 0px 10px red;
2
# 二. CSS3 新特性之选择器篇
# 1. 属性选择器
[属性名=值] {}
[属性名] {}
匹配对应的属性即可[属性名^=值] {}
以值开头[属性名*=值] {}
包含[属性名$=值] {}
以值结束
p[class$="o"] {
color: red;
}
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;
}
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;
}
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
);
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
);
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>
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>
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 转换实现魔方
# 六. CSS3 新特性之动画篇
# 1. 过渡
过渡又称补间动画,当一个元素从一个状态到另一个状态切换时,中间有个空白,过渡能为这个空白添加一个效果。
过渡主要有几个属性:
transition-property: all;
设置哪些属性要参与到过渡动画效果中:alltransition-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>
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);
}
}
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;
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>
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;
2
3
4
- 设置元素在主轴的对齐方式(
justify-content
)
/* 设置子元素在主轴方向的对齐方式 */
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
2
3
4
5
6
- 设置元素在侧轴的对齐方式(
align-items
)
align-items: flex-start;
align-items: flex-end;
align-items: center;
/* 默认值 */
align-items: stretch;
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;
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>
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 最常用的功能,难度不大,只是要记住的属性比较多。不需要考虑兼容问题的话可以多用,一般移动端用的比较多。