随着CSS3的发展，网络开发的进步已经走向了完美的想象。对于文本和其他用法，CSS drop-shadow可以实现一个好看的效果框，我们直接来看具体的代码。
这是html部分：
<div id="beauty-boxes">Some example text</div>
CSS代码
#beauty-boxes{ transition: all 0.5s ease; position:relative; float:left; width:45%; padding:2px; margin:3px; background:#fff; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0), 0 0 40px rgba(0, 0, 0, 0) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0) inset; -moz-border-radius:4px; border-radius:4px; } #beauty-boxes:before, #beauty-boxes:after { content:""; position:absolute; z-index:-3; bottom:15px; left:12px; width:50%; height:20%; max-width:350px; max-height:90px; -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); -webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg); -ms-transform:rotate(-3deg); -o-transform:rotate(-3deg); transform:rotate(-3deg); } #beauty-boxes:after { right:10px; left:auto; -webkit-transform:rotate(3deg); -moz-transform:rotate(3deg); -ms-transform:rotate(3deg); -o-transform:rotate(3deg); transform:rotate(3deg); }.beauty-boxes p { font-size:16px; font-weight:bold; } #beauty-boxes:hover{ background-color:#161616; color:#fff; }效果如下：
