SOURCE

<h1 class="text-shadow">
  文字阴影
</h1>
<div class="b">
  <h1 class="outer-emboss">
    外浮雕效果
  </h1>
  <h1 class="inner-emboss">
    内浮雕效果
  </h1>
</div>


<div class="block-shadow">
</div>


<div class="block-shadow-spread">
</div>

<div class="block-shadow-inset">
</div>

div{
  margin:50px 40px;
}
.text-shadow {
  text-shadow: 0 -8px 3px rgba(255, 0, 0, .5);
}

.b {
  background-color: #ccc;
  padding: 5px;
}

.outer-emboss {
  color: #b0b0b0;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, .7);
}

.inner-emboss {
  color: #fff;
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.7)
}

.block-shadow {
  width: 100px;
  height: 100px;
  background: #fff;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3)
}

.block-shadow-spread{
  width: 100px;
  height: 100px;
  background: #fff;
  box-shadow: 5px 5px 5px 20px rgba(0, 0, 0, 0.3);
}

.block-shadow-inset{
  width: 100px;
  height: 100px;
  background: #fff;
  box-shadow: 5px 5px 5px 20px rgba(0, 0, 0, 0.3) inset;
}