avatar

css早期练习 常用阴影

常用阴影

无阴影

样式

1
2
3
4
5
6
7
8
9
10
11
12
<style>
.box {
width: 150px;
height: 80px;
background-color: #00adb5;
margin: 0 auto;
}
.shadow1 {
box-shadow: 0 0 12px rgba(0, 173, 181, 0.8);
}
</style>
<div class="box shadow1"></div>

下侧投影

样式

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

<style>
.box {
width: 150px;
height: 80px;
background-color: #00adb5;
margin: 0 auto;
}
.shadow2 {
box-shadow: 0px 6px 12px -4px rgba(0, 173, 181, 0.8);
}
</style>
<div class="box shadow2"></div>

右侧投影

样式

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

<style>
.box {
width: 150px;
height: 80px;
background-color: #00adb5;
margin: 0 auto;
}
.shadow3 {
box-shadow: 6px 6px 12px -5px rgba(0, 173, 181, 0.8);
}
</style>
<div class="box shadow3"></div>

双侧投影

样式

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

<style>
.box {
width: 150px;
height: 80px;
background-color: #00adb5;
margin: 0 auto;
}
.shadow4 {
box-shadow: 6px 0 12px -5px rgba(0, 173, 181, 0.8), -6px 0 12px -5px rgba(0, 173, 181, 0.8);
}
</style>
<div class="box shadow4"></div>

菜单投影

样式

1
2
3
4
5
6
7
8
9
10
11
12
<style>
.box {
width: 150px;
height: 80px;
background-color: #00adb5;
margin: 0 auto;
}
.shadow5 {
box-shadow: 0 3px 12px rgba(0, 173, 181, 0.8);
}
</style>
<div class="box shadow5"></div>

投影边框

样式

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
.box {
width: 150px;
height: 80px;
background-color: #00adb5;
margin: 0 auto;
}
.shadow6 {
box-shadow: 0 0 0 1px rgba(0, 173, 181, 0.8);
background-color: #fff;
}
</style>
<div class="box shadow6"></div>

虚线阴影

样式

1
2
3
4
5
6
7
8
9
10
<style>
.shadow-dotted {
width: 120px;
height: 120px;
border: 6px dotted #00adb5;
filter: drop-shadow(2px 2px 2px rgba(64, 158, 255, .9));
margin: 0 auto;
}
</style>
<div class="shadow-dotted"></div>

三角形阴影

样式

1
2
3
4
5
6
7
8
9
10
11
12
<style>
.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(39, 92, 171, .5));
margin: 0 auto;
}
</style>
<div class="shadow-triangle"></div>

右缺圆角阴影

样式

1
2
3
4
5
6
7
8
9
10
<style>
.circle-square {
width: 120px;
height: 120px;
background: radial-gradient(circle at bottom right, transparent 49px, #00adb5 34px);
filter: drop-shadow(2px 2px 2px rgba(64, 158, 255, .9));
margin: 0 auto;
}
</style>
<div class="circle-square"></div>

信息窗口

样式

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
<style>
/* 信息窗口 */
.tip {
width: 140px;
height: 80px;
border: 1px solid #00adb5;
border-radius: 4px;
position: relative;
background-color: #fff;
filter: drop-shadow(0px 2px 4px rgba(64, 158, 255, .9));
margin: 0 auto;
}

.tip::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;
}

.tip::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;
}
</style>

<div class="tip"></div>
文章作者: 张复明
文章鏈接: https://hexo.zhangaming.com/2020/04/03/css-shadow/
版權聲明: 本博客所有文章除特別聲明外,均採用 CC BY-NC-SA 4.0 許可協議。轉載請註明來自 阿明的博客
打賞
  • 微信
    微信
  • 支付寶
    支付寶

評論