CSS 效果
1.box-shadow
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| # HTML
<body>
<div class="container">
</div>
<div class="container">
</div>
</body>
# CSS
<style>
.container{
background:red;
width:200px;
height:200px;
margin:100px;
外阴影
内阴影
边框
}
</style>
|
更复杂的用法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| # HTML
<body>
<div class="container">
</div>
</body>
# CSS
<style>
.container{
background:red;
width:200px;
height:200px;
margin:100px;
border-radius:5px;
box-shadow:200px 200px 0 5px green, 230px 200px 0 5px green, 215px 215px 0 -3px red;
}
</style>
|
营造层次感（立体感）
充当没有宽度的边框
特殊效果
2.text-shadow
立体感，印刷品质感。
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
| # HTML
<body>
<div class="container">
<p>我与父亲不相见已二年余了，我最不能忘记的是他的背影。那年冬天，祖母死了，父亲的差使</p>
<p>我与父亲不相见已二年余了，我最不能忘记的是他的背影。那年冬天，祖母死了，父亲的差使</p>
<p>我与父亲不相见已二年余了，我最不能忘记的是他的背影。那年冬天，祖母死了，父亲的差使</p>
</div>
</body>
# CSS
<style>
.container{
margin:0 auto;
max-width:800px
font-size:18px;
line-height:2em;
font-family:STKaiti;
text-shadow:1px 1px 0 #aaa;
}
.container p{
text-indent:2em;
}
</style>
|
3.border-radius
圆角矩形
圆形
半圆 / 扇形
奇怪的角
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| # HTML
<body>
<div class="container">
</div>
</body>
# CSS
<style>
.container{
background:red;
width:200px;
height:200px;
}
</style>
|
4.background
纹理、图案
渐变
雪碧图动画
背景图尺寸适应
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| # HTML
<body>
<div class="container">
<div class="i"></div>
</div>
</body>
# CSS
<style>
.container{
}
.i{
width:20px;
height:200px;
background:url(./background.png) no-repeat;
background-size:20px 40px;
transition:background-position .4s;
}
.i:hover{
background-position:0 -20px;
}
</style>
|
引用
关于background尺寸问题：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| # HTML
<body>
<div class="container">
<div class="i"></div>
</div>
</body>
# CSS
<style>
.container{
width:40px;
height:300px;
border:1px solid red;
background:url(./panda.jpg);
background-size:center center;
background-repeat:no-repeat;
background-size:cover;
}
</style>
|
5.clip-path
对容器进行裁剪
常见几何图形
自定义路径
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
| # HTML
<body>
<div class="container">
你好，我是熊猫
</div>
</body>
# CSS
<style>
.container{
width:40px;
height:300px;
border:1px solid red;
background:url(./panda.jpg);
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
padding:10px;
}
</style>
|
浏览器兼容性不太好，很多效果没办法做事可以用这个效果。
（和动画关系不大） translate scale skew rotate
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
| # HTML
<body>
<div class="container">
<div id="cube">
<div class="front">1</div>
</div>
</div>
</body>
# CSS
<style>
.container{
margin:50px;
padding:10px;
border:1px solid red;
width:200px;
height:200px;
position:relative;
透视距离
}
#cube{
width:200px;
height:200px;
3D透视
}
#cube div{
width:200px;
heigth:200px;
position:absolute;
line-height:200px;
font-size:50px;
}
.front{
background:rgba(255,0,0,.3);
}
.back{
}
.left{
}
.right{
}
.top{
}
.bottom{
}
</style>
|
性能并不是特别好，渲染可能会出错。
7.面试真题
- 如何用一个
div画XXX：
box-shadow无限投影
::before
::after
- 如何产生不占空间的边框：
box-shadow
outline
- 如何实现圆形元素（头像）：
border-radius:50%
- 如何实现iOS图标的圆角：
clip-path:(svg)
- 如何实现半圆、扇形等图形：
border-radius组合：
有无边框
边框粗细
圆角半径
- 如果实现背景图居中显示 / 不重复 / 改变大小：
background-position
background-repeat
background-size(cover/contain)
- 如何平移 / 放大一个元素
transform:translateX(100px)
transform:scale(2)
- 如何实现3D效果
perspective:500px
transform-style:perserve-3d
transform:translate rotate ...