box-shadow的学习笔记

发表于 | 更新于 | 分类于

box-shadow

box-shadow 属性向元素添加阴影效果。

1
box-shadow: h-shadow v-shadow blur spread color inset;

  • h-shadow：水平阴影的位置，可取正值或负值（必需）。
  • v-shadow：垂直阴影的位置，可取正值或负值（必需）。
  • blur：模糊距离（可选）。
  • spread：阴影的尺寸（可选）。
  • color：阴影的颜色（可选）。
  • inset：从外层的阴影改变为内侧阴影（可选）。

h-shadow，v-shadow


1
2
3
4
5
6
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.box1,
.box2,
.box3,
.box4 {
    margin-right: 40px;
    width: 150px;
    height: 150px;
    background: #f0f0f0;
    float: left;}
.box1 {
    box-shadow: 0 0 5px 5px gray;}
.box2 {
    box-shadow: 15px 0 5px 5px gray;}
.box3 {
    box-shadow: 0 15px 5px 5px gray;}
.box4 {
    box-shadow: 15px 15px 5px 5px gray;}

blur,spread


1
2
3
4
5
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.box1,
.box2,
.box3 {
    margin-right: 40px;
    width: 150px;
    height: 150px;
    background: #f0f0f0;
    float: left;}
.box1 {
    box-shadow: 0 0 10px 10px gray;}
.box2 {
    box-shadow: 0 0 0 10px gray;}
.box3 {
    box-shadow: 0 0 20px 10px gray;}

inset


1
2
3
4
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

1
2
3
4
5
6
7
8
9
10
11
.box1,
.box2 {
    margin-right: 40px;
    width: 150px;
    height: 150px;
    background: #f0f0f0;
    float: left;}
.box1 {
    box-shadow: 0 0 10px 10px gray;}
.box2 {
    box-shadow: 0 0 10px 10px gray inset;}

多重阴影


1
2
3
<body>
    <div></div>
</body>

1
2
3
4
5
6
7
div {
    margin-right: 40px;
    width: 50px;
    height: 50px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 10px 10px #78ff00, 0 0 10px 20px #ffe600, 0 0 10px 30px #ffa500, 0 0 10px 40px #ff0017, 0 0 10px 10px #78d4f4 inset;}