CSS生成跨浏览器的阴影效果
阴影效果是web开发中一个头疼的问题,我做过各种各样的阴影效果,大部分都是用图片生成的,很难定位。现在找到了一种简单的用CSS生成阴影的方法,大家看看下面的例子:
<style type="text/css">div.shadows {margin: 3em auto;width: 25em;font-size: 1.2em;padding: 1em;background: #fff;border: 1px solid #ccc;}div.shadows p {margin: 0;font: 100% Helvetica, Arial, sans-serif;}div.shadows {-moz-box-shadow: 2px 2px 10px #000;-webkit-box-shadow: 2px 2px 10px #000;}</style><!--[if IE]><style type="text/css">div.shadows {-ms-filter: "progid:DXImageTransform.Microsoft.Glow(color=#666666,strength=3) progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=135,strength=6)";filter: progid:DXImageTransform.Microsoft.Glow(color=#666666,strength=3) progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=135,strength=6);}</style>< ![endif]--><div class="shadows"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>