shadow 阴影
常用阴影
"无偏移投影"
box-shadow: 0 0 12px rgba(0, 173, 181, 0.8);"下侧投影"
box-shadow: 0px 6px 12px -4px rgba(0, 173, 181, 0.8);"右侧投影"
box-shadow: 6px 6px 12px -5px rgba(0, 173, 181, 0.8);"双侧投影"
box-shadow: 6px 0 12px -5px rgba(0, 173, 181, 0.8), -6px 0 12px -5px rgba(0, 173, 181, 0.8);"菜单投影"
box-shadow: 0 3px 12px rgba(0, 173, 181, 0.8);"投影边框"
box-shadow: 0 0 0 1px rgba(0, 173, 181, 0.8);全部代码
vue
<template>
<div class="shadow-container">
<div class="panel">
<p>"无偏移投影"</p>
<div class="box shadow1"></div>
<code> box-shadow: 0 0 12px rgba(0, 173, 181, 0.8);</code>
</div>
<div class="panel">
<p>"下侧投影"</p>
<div class="box shadow2"></div>
<code>box-shadow: 0px 6px 12px -4px rgba(0, 173, 181, 0.8);</code>
</div>
<div class="panel">
<p>"右侧投影"</p>
<div class="box shadow3"></div>
<code>box-shadow: 6px 6px 12px -5px rgba(0, 173, 181, 0.8);</code>
</div>
<div class="panel">
<p>"双侧投影"</p>
<div class="box shadow4"></div>
<code> box-shadow: 6px 0 12px -5px rgba(0, 173, 181, 0.8), -6px 0 12px -5px rgba(0, 173, 181, 0.8);</code>
</div>
<div class="panel">
<p>"菜单投影"</p>
<div class="box shadow5"></div>
<code>box-shadow: 0 3px 12px rgba(0, 173, 181, 0.8);</code>
</div>
<div class="panel">
<p>"投影边框"</p>
<div class="box shadow6" style="background-color:#fff;"></div>
<code> box-shadow: 0 0 0 1px rgba(0, 173, 181, 0.8);</code>
</div>
</div>
</template>
<style scoped lang="scss">
.shadow-container {
display: flex;
justify-content: flex-start;
align-content: flex-start;
flex-wrap: wrap;
.panel {
box-sizing: border-box;
width: 49%;
height: 180px;
p {
text-align: center;
}
}
.box {
width: 150px;
height: 80px;
background-color: #00adb5;
margin: 0 auto 5px;
}
.shadow1 {
box-shadow: 0 0 12px rgba(0, 173, 181, 0.8);
}
.shadow2 {
box-shadow: 0px 6px 12px -4px rgba(0, 173, 181, 0.8);
}
.shadow3 {
box-shadow: 6px 6px 12px -5px rgba(0, 173, 181, 0.8);
}
.shadow4 {
box-shadow: 6px 0 12px -5px rgba(0, 173, 181, 0.8), -6px 0 12px -5px rgba(0, 173, 181, 0.8);
}
.shadow5 {
box-shadow: 0 3px 12px rgba(0, 173, 181, 0.8);
}
.shadow6 {
box-shadow: 0 0 0 1px rgba(0, 173, 181, 0.8);
}
}
</style>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
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
特殊阴影
.shadow-dotted {
width: 120px;
height: 120px;
border: 6px dotted #00adb5;
filter: drop-shadow(2px 2px 2px rgba(0, 173, 181, 0.9));
} .shadow-triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 0 50px 50px 50px;
border-color: transparent transparent #00adb5 transparent;
filter: drop-shadow(10px 0px 10px rgba(0, 173, 181, 0.5));
} .circle-square {
width: 120px;
height: 120px;
background: radial-gradient(circle at bottom right,
transparent 49px,
#00adb5 34px);
filter: drop-shadow(2px 2px 2px rgba(0, 173, 181, 0.9));
}.tip {
width: 140px;
height: 80px;
border: 1px solid #00adb5;
border-radius: 4px;
position: relative;
background-color: #fff;
filter: drop-shadow(0px 2px 4px rgba(0, 173, 181, 0.9));
&::before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent #fff transparent;
position: absolute;
top: -10px;
left: 0;
right: 0;
margin: auto;
z-index: 2;
}
&::after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent #00adb5 transparent;
position: absolute;
top: -11px;
left: 0;
right: 0;
margin: auto;
z-index: 1;
}
}