<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>曲线阴影，翘边阴影</title>
</head>
<style type="text/css">* {margin: 0;padding: 0;list-style: none}.wrap {margin: 50px auto;width: 600px;height: 200px;background-color: #e1e2de}.wrap h1 {display: inline-block;color: #e98016;text-align: center;font-size: 30px;}.effect {position: relative;-moz-box-shadow: 0 0 4px rgba(0, 0, 0, .2);box-shadow: 0 0 4px rgba(0, 0, 0, .2);-webkti-box-shadow: 0 0 4px rgba(0, 0, 0, .2);-0-box-shadow: 0 0 4px rgba(0, 0, 0, .2)}.effect:after,.effect:before {position: absolute;top: 10%;right: 10px;bottom: 0;left: 10px;border-radius: 10%;content: '';z-index: 1;-moz-box-shadow: 0 0 15px rgba(0, 0, 0, .8);box-shadow: 0 0 15px rgba(0, 0, 0, .8);-webkti-box-shadow: 0 0 15px rgba(0, 0, 0, .8);-0-box-shadow: 0 0 15px rgba(0, 0, 0, .8)}.box {position: relative;-moz-box-shadow: 0 0 4px rgba(0, 0, 0, .2);box-shadow: 0 0 4px rgba(0, 0, 0, .2);-webkti-box-shadow: 0 0 4px rgba(0, 0, 0, .2);-0-box-shadow: 0 0 4px rgba(0, 0, 0, .2)}.box:after {position: absolute;top: 50%;right: 10px;bottom: 10px;left: 20px;z-index: -1;background: transparent;-moz-box-shadow: -3px 5px 20px rgba(0, 0, 0, .8);box-shadow: -3px 5px 20px rgba(0, 0, 0, .8);content: '';-webkit-transform: skew(0, 2deg);-webkti-box-shadow: -3px 5px 20px rgba(0, 0, 0, .8);-0-box-shadow: -3px 5px 20px rgba(0, 0, 0, .8)}.box:before {position: absolute;top: 50%;right: 20px;bottom: 10px;left: 10px;z-index: -2;background: transparent;-moz-box-shadow: 3px 5px 20px rgba(0, 0, 0, .8);box-shadow: 3px 5px 20px rgba(0, 0, 0, .8);content: '';-webkit-transform: skew(0, -2deg);-webkti-box-shadow: 3px 5px 20px rgba(0, 0, 0, .8);-0-box-shadow: 3px 5px 20px rgba(0, 0, 0, .8)}
</style><body><div class="wrap effect"><h1>曲线阴影</h1><p>before,after 设置 border-radius:100px/10px,添加阴影，设置Z-index属性移到底部，调整位置</p></div><div class="wrap box"><h1>翘边阴影</h1><p>分别对before,after进行skew，变平行四形，再行移至两个底角位置，背景background:transparent，添加阴影，调整位置。注释z-index便知原理</p></div>
</body></html>
转自：http://www.gbtags.com/gb/share/4492.htm