JSFiddle - React, Tailwind, and code Playground

by etianqq

HTML

<p>
box-shadow:[inset] h-shadow v-shadow blur spread color;
</p>
<p>
共有6个参数，其中inset可以省略，省略情况下默认为外阴影。此外分别是阴影水平偏移量、阴影垂直偏移量、阴影模糊半径、阴影扩展半径、阴影颜色。 
</p>
<div class="box box-shadow1">
单边实影和单边阴影效果
</div>
<div class="box box-shadow2">
  只设置阴影模糊半径和阴影颜色
</div>
<div class="box box-shadow3">
  只设置阴影模糊半径,扩展半径和阴影颜色
</div>
<div class="box box-shadow4">
  只设置扩展半径和阴影颜色
</div>
<div class="box inset-shadow">
  内阴影效果
</div>
<div class="box box-shadow5">
  多层阴影效果
</div>
<div class="box box-shadow6">
  多色边框
</div>
<div class="box box-shadow7">
  多色点
</div>
<div class="wrap effect">
    <h1>Box-shadow Effect</h1>
</div>

<p>
更多参考： <a href="http://blog.csdn.net/macanfa/article/details/51646807">
http://blog.csdn.net/macanfa/article/details/51646807
</a>
</p>

CSS

.box {
  display: inline-block;
  text-align: center;
}

.box-shadow1 {
  width:200px;height:200px;
  border:1px solid #ccc;
  box-shadow:0 5px 5px -3px #ccc;
  margin: 10px;
}

.box-shadow2{
      width:200px;height:200px;
      border:1px solid #ccc;
      box-shadow: 0 0 50px #ccc;
      margin: 10px;
    }
    /*在此基础上加上扩展半径可以加深阴影的深度（正值），也可向内压缩阴影(负值)，直到扩展半径等于模糊半径，阴影才完全消失。 */
    .box-shadow3{
      width:200px;height:200px;
      border:1px solid #ccc;
      box-shadow: 0 0 10px -10px #ccc;/*此刻阴影为完全消失，向内压缩了*/
      margin: 10px;
    }
    
    /*设置阴影模糊半径和阴影颜色:模拟border边框，但不计入总大小*/
  .box-shadow4{
    width:200px;height:200px;
    border:1px solid #ccc;
    box-shadow: 0 0 0 10px #ccc;
    margin:20px;
  }
  
  /*内阴影效果*/
  .inset-shadow{
    width:200px;height:200px;
    border:1px solid #ccc;
    box-shadow:inset 3px 3px 10px #ccc;
    margin: 10px;
  }
  
  .box-shadow5{
    width:200px;height:200px;
    border:1px solid #ccc;
    box-shadow:
      5px 5px 5px red,
      10px 10px 5px blue,
      15px 15px 5px green,
      20px 20px 5px orange;
    margin:20px;
  }
  
  /*多色边框*/
  .box-shadow6{
    width:200px;height:200px;
    border:1px solid #ccc;
    box-shadow:
      0 0 0 1px red,
      0 0 0 5px green,
      0 0 0 8px blue,
      0 0 0 12px yellow,
      0 0 0 16px orange,
      0 0 0 20px purple;
    margin:20px;
  }
  
  .box-shadow7{
    width: 100px;
    height: 100px;
  }
  .box-shadow7:after{
    position: absolute;
    content: '';
    width: 3px;
    height: 3px;
    margin: 14.5px 0 0 14.5px;
    border-radius: 100%;
    box-shadow: 0 -10px 0 1px red, 10px 0px green, 0 10px blue, -10px 0 yellow, -7px -7px 0 0.5px #ccc, 7px -7px 0 1.5px #000, 7px 7px #2D6760, -7px 7px #61561A;
  }
  
  .wrap{
    width:70%;height:200px;
    margin:50px auto;
    background:#fff;
}
.wrap h1{
    font-size:25px;text-align:center;
    line-height:200px;
}
.effect{
    /*为后面添加的伪元素提供定位*/
    position:relative;
    box-shadow:0px 1px 4px rgba(0,0,0,0.3), 0 0 50px...