<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>box-shadow</title> ???<style> ???????.box{ ???????????position: relative; ???????????width: 700px; ???????????height: 200px; ???????????margin: 0 auto; ???????????background: #fff; ???????????text-align: center; ???????????line-height: 200px; ???????????font-size: 25px; ???????????box-shadow: 0 1px 4px rgba(0,0,0,0.3), ???????????????????????0 0 1px rgba(0,0,0,0.3) inset; ???????} ???????.box:after,.box:before{ ???????????display: block; ???????????position: absolute; ???????????content:‘‘; ???????????background: rgba(0,0,0,1); ???????????bottom: 0; ???????????left: 15px; ???????????right: 15px; ???????????top: 50%; ???????????z-index: -1; ???????????box-shadow: 0 0px 20px rgba(0,0,0,0.4); ???????????border-radius: 30%; ???????} ???????.box1{ ???????????width: 400px; ???????????height: 300px; ???????????background: #f1f1f1; ???????????margin: 0 auto; ???????????margin-top: 15px; ???????????line-height: 300px; ???????????font-size: 25px; ???????????text-align: center; ???????????box-shadow:0 1px 4px rgba(0,0,0,0.4), ???????????????????????0 0 60px rgba(0,0,0,0.4) inset; ???????????border-radius: 12px; ???????????position: relative; ???????} ???????.box1:before,.box1:after{ ???????????position: absolute; ???????????content: ‘‘; ???????????display: block; ???????????width: 80%; ???????????height: 80%; ???????????left: 43px; ???????????bottom: 11px; ???????????background: #f1f1f1; ???????????box-shadow: 0 8px 20px rgba(0,0,0,0.7); ???????????z-index: -1; ???????} ???????.box1:before{ ???????????transform: skew(-12deg) rotate(-4deg); ???????} ???????.box1:after{ ???????????transform: skew(12deg) rotate(4deg); ???????} ???</style></head><body> ???<div class="box"> ???????box-shadow曲线阴影 ???</div> ???<div class="box1"> ???????<div class="img">box-shadow翘边阴影</div> ???</div></body></html>css3 曲线阴影，翘边阴影
原文地址：http://www.cnblogs.com/huangmin1992/p/7883419.html