CSS的box-shadow盒子阴影

box-shadow：盒子阴影，用于给元素添加阴影的效果，该属性可设置6个值，分别是inset（阴影向内）设置内阴影，水平（X）偏移值，垂直（Y）偏移值，阴影模糊半径值，阴影外延伸值，颜色

box-shadow 示例1

HTML部分

<div class='boxShadow'></div>

CSS部分

.boxShadow{
      width:200px;
      height:200px;
      margin:100px auto;
      border-radius:50%;
      box-shadow:inset  20px  15px  50px  11px  #000; 
}

效果如下:

用box-shadow盒子阴影画的球

box-shadow 示例2

HTML部分

<div  class='boxShadow2'></div>

CSS部分

.boxShadow2{
      width: 400px;
      height: 200px;
      border-radius: 50%/70px;
      background-color: #ff00ba;
      margin: 100px auto;
      line-height: 200px;
      text-align: center;
      color: #fff;
      font-size: 40px;
      box-shadow: 0 0 4px 7px rgba(255,0,1186,0.4);
}

效果如下:

box-shadow盒子阴影示例2