box-shadow 添加阴影效果、四周阴影

box-shadow 属性用于在元素的框架上添加阴影效果

语法

 div{
      /* 主要参数 */
      box-shadow: 10px 10px 20px 20px red;
      box-shadow: X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色; 
}

特殊值

inset：

• 如果没有指定inset，默认阴影在边框外，即阴影向外扩散； 
• 使用 inset 关键字会使得阴影落在盒子内部，这样看起来就像是内容被压低了。此时阴影会在边框之内 (即使是透明边框）、背景之上、内容之下。

/* inset 放在前后都可以 */
box-shadow: 0px 0px 10px 10px red inset;

 使用前后对比：

                                

 特殊场景

1、四周阴影：

box-shadow: 参数1 参数2 10px 10px red;
/* 四周阴影就是参数1(x) 参数2(y)设为 0px */
box-shadow: 0px 0px 10px 10px red;

2、可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开

box-shadow:
        0px 0px 5px 5px #000,
        0px 0px 10px 10px red;