【外部阴影：阴影在盒子外】
1）两个长度参数：表示阴影在水平方向和垂直方向的偏移量，偏移量是按相对元素左上角计算的，若水平值和垂直值均为正，则阴影在元素的右下方
div{margin:20px;float:left;}
.div1{
width: 10em;
height: 6.5em;
border:1px solid black;
background-color: white;
box-shadow: 1em 1em gray;
}
/*颜色值是可选项，若缺少此项，则取curentColor的值
2）3个长度参数，表示阴影的模糊半径，对阴影的外边缘进行模糊处理
半径越长，则越模糊
实际上是从阴影边缘以阴影颜色开始向周围绘制渐变色，直到模糊半径指定的位置为透明色为止
.div2{
width: 10em;
height: 6.5em;
border:1px solid black;
background-color: white;
box-shadow: 1em 1em 1em hsla(0, 0%, 0%, 0.3);
}
3）4个长度参数：表示阴影的扩散半径
当无此参数或此参数值为0时，表示阴影的尺寸和元素的尺寸相等
如果扩散半径大于0，则阴影的尺寸在元素原尺寸基础上扩大，扩大的长度即是扩散半径的大小
如果扩散半径小于0，则阴影的尺寸在元素原尺寸基础上缩小
.div3{
width: 10em;
height: 6.5em;
border:1px solid black;
background-color: white;
box-shadow: 1em 1em 0 0.5em gray;
}
/*如果把水平和垂直偏移量为0，则会像一个边框*/
.div4{
width: 10em;
height: 6.5em;
border:1px solid black;
background-color: white;
box-shadow: 0 0 0 0.5em gray;
}
/*前5个元素的阴影均未设置模糊半径，但又同时设置了模糊半径和扩散半径，形成浮起状态*/
.div5{
width: 10em;
height: 6.5em;
border:1px solid black;
background-color: white;
box-shadow: 0 0 2em 0.3em hsla(0, 0%, 0%, 0.3);
}
【内部阴影：阴影在盒子内(即描绘向物品自身的投影)】
添加inset关键字
.div6{
width: 10em;
height: 6.5em;
border:1px solid black;
background-color: white;
box-shadow: inset 0.5em 0.5em gray;
}
/*增加半径的内部阴影效果*/
.div7{
width: 10em;
height: 6.5em;
border:1px solid black;
background-color: white;
box-shadow: inset 0 0 1em gray;
}
/*增加扩散半径的内部阴影效果*/
.div8{
width: 10em;
height: 6.5em;
border:1px solid black;
background-color: white;
box-shadow: inset 0 0 0 0.5em gray;
}
注：如果不设置某个长度值，要在它的位置补0
阴影颜色和inset可写在做任意位置，只要不在4个长度值之中即可
【多重阴影】
.div9{
width: 30em;
height: 20em;
background-color: lightyellow;
border:2em solid burlywood;
border-radius: 3em;
box-shadow:
inset 0.4em 0.4em 0.1em 0.5em hsla(0, 0%, 0%, 0.4),
0 0.3em 2em 0.4em hsla(0, 0%, 0%, 0.3);
}
【利用box-shadow复制新元素】
.cross{
font-size: 60px;
width: 1em;
height: 1em;
color:orange;
border-radius: 50%;
border:1px dashed black;
}
.cross:nth-child(1){
box-shadow:
1.1em 0em,
0em 1.1em,
1.1em 1.1em,
2.2em 1.1em,
1.1em 2.2em;
}
.cross:nth-child(2){
background-color: currentColor;
box-shadow:
0em -1.1em 0 -0.1em tomato,
-1.1em 0em 0 0.2em gold,
1.1em 0em 0 0.2em gold,
0em 1.1em 0 0.1em;
}
【形状阴影函数drop-shadow()】
与box-shadow的区别：
box-shadow只能绘制1个元素的阴影
drop-shadow()能绘制一个容器内多个元素组合形成的图案阴影
4个参数：水平偏移量、垂直偏移量、模糊半径和颜色
注：不能绘制内阴影，阴影的尺寸与本体保持一致
.qq{
font-size: 10px;
box-sizing: border-box;
width: 20em;
height: 22em;
color: orange;
border: 3em solid;
border-radius: 50%;
position: relative;
}
.qq::before{
content:'';
position: absolute;
width: 10em;
height: 5em;
top:11em;
left:9em;
background-color: currentColor;
border-radius: 50%;
transform: rotate(45deg);
}
/*复制*/
.qq{
filter: drop-shadow(21em 0);
/*background-color: white;*/
}
