CSS3-盒子阴影

语法：box-shadow：水平位置，垂直位置，模糊程度，阴影大小，阴影颜色，内/外阴影

水平阴影：必选，可以正负值，正数阴影向右边走，负数则是阴影向左边走。

 box-shadow: 50px 0px 0px  #ddd ;   
  /* 从左到右 水平位置，垂直位置，模糊程度，阴影颜色 */ 

垂直阴影：必选，可以正负值，正数阴影向下走，负数则是阴影向上走。

css代码 

      box-shadow: 0px 50px 5px  #ddd ;   
  /* 从左到右 水平位置，垂直位置，模糊程度，阴影颜色 */ 

模糊程度：可选，数值越大越模糊，数值越小越清晰。不可负数。

css代码

     box-shadow: 50px 50px 10px  #ddd ;   
  /* 从左到右 水平位置，垂直位置，模糊程度，阴影颜色 */ 

阴影大小：可选，可以正负值，阴影大小基于盒子大小，正数越大阴影越大，0和盒子一样大小，负数越大阴影越小。

css代码

      box-shadow: 10px 10px 10px 50px #ddd ;   
  /* 从左到右 水平位置，垂直位置，模糊程度，阴影大小，阴影颜色 */ 

阴影颜色：可选，选择阴影颜色。 

 css 代码

      box-shadow: 50px 40px 10px 0px #3c3c3c  ;   
  /* 从左到右 水平位置，垂直位置，模糊程度，阴影大小，阴影颜色*/ 

内外阴影：可选，默认值是外阴影。inset是内阴影。（外阴影不可设置，手动添加外阴影，阴影则会消失）。

css代码

      box-shadow: 50px 40px 10px 0px #3c3c3c inset ;   
  /* 从左到右 水平位置，垂直位置，模糊程度，阴影大小，阴影颜色 内阴影*/ 

小案例

 

css代码

    div {
      width: 249px;
      height: 249px;
      margin: 100px;
      background-color: pink;
      background: url(../imgs/shui.jpg)  0 0 no-repeat; 
      border-radius: 50%;
                  /* 水平阴影 垂直阴影 模糊程度 阴影大小 颜色 内阴影 */
      box-shadow: 3px 5px 10px 16px rgb(255 255 255 / 40%) inset,
                  5px 4px 10px rgb(0 0 0 / 30%);
                  /* 水平阴影 垂直阴影 模糊程度 颜色 */
    }