如何实现css3的阴影效果？

问题描述

|                                                                                                                   关闭。这个问题需要更加集中。它当前不接受答案。                                                      

解决方法

        起初，我认为不可能。然后，我发现此页面在纯CSS中显示了一些不错的示例。 好漂亮 请参阅演示页以了解可以实现的目标。     ,        仅HTML和CSS 阴影会自动适应图像的宽度。 使用PNG图像，可以完成以下操作： （尚未经过详尽的兼容性测试，但可以在最新的FF，Safari和Chrome浏览器中使用）

<style type=\"text/css\" media=\"all\">
.shadow {
    position:relative;
    width:auto;
    padding:0;
    margin:0;
}
.shadow:before,.shadow:after {
    content:\"\";
    position:absolute; 
    z-index:-1;
}
.arch01:after {
    position:absolute;
    padding:0; margin:0;
    height:34px;
    width:100%;
    bottom:-30px;
    left:0px; right:0px;
    background-image: url(\'arch_01.png\');
    background-size:100% 100%;
    background-position:left top;
}
</style>


<span class=\"shadow arch01\">
    <img src=\"photo.jpg\" width=\"500px\" height=\"250px\">
</span>