Css 如何创建带有阴影的动态框-使用PNG图片

我想创建一个框及其阴影，而不使用框阴影css属性来支持旧浏览器

哪种方法最好

这个结构好吗？如果是，如何将“bx3”图像设置为重复到“bx4”

这里有一点提示

HTML:

请注意，此结构适用于所有侧面。。但是你可以删除你不需要的边和角

---

编辑：实际上，标记.borderWrap可能会在某些浏览器的某些情况下造成不必要的副作用。。不太确定。。您可以在每个边框元素上单独指定position absolute，或者给它们指定所有公共类，如and then.shadow{position:absolute/*和一些您可能希望包含的其他属性*/}

如果您必须具有旧IE兼容性，请使用

---

通过使用框阴影。。。您正在降级您的代码，因为有人懒得升级他们的浏览器…不幸的是，许多人仍然使用Internet Explorer 9-（这是使用box shadow所必需的）工作完美！多谢各位@2旁注上的斯大拉维斯塔。。我最近才了解到这一点，如果我没记错的话，我自己在ie上看起来也很不错。我认为这种手动处理图像的方式为你提供了更多的边界外观选择。另一方面。。用这种方法在图像上添加覆盖层是相当容易的。这种效果非常难看。（在IE7和IE8上感到疲劳）

        <div class="wbx">
            <div class="bx1">
                <h2>Title</h2>
                <p>Text</p>
            </div>
            <div class="right_shadow">
                <div class="bx2"></div>
                <div class="bx3"></div>
            </div>
            <div class="bottom_shadow">
                <div class="bx4"></div>
                <div class="bx5"></div>
                <div class="bx6"></div>
            </div>
        </div>

.top-right{
width:16px;
height:16px;
background-color:blue;
right: 0px;
top:-16px;    
}
.right{
    background: url(http://jsfiddle.net/img/social-icons/facebook_16.png) repeat-y 0 0;
    /*background-color:cyan;*/
    right:0px;
    top:0px;
    width:16px;
    height:100%;
}

<div class="ShadowWrap">
    <div class="borderWrap">
        <span class="top"></span>
        <span class="right"></span>
        <span class="bottom"></span>
        <span class="left"></span>

        <span class="top-right"></span>
        <span class="bottom-right"></span>
        <span class="bottom-left"></span>
        <span class="top-left"></span>
    </div>

    <p style="margin: 0px; padding: 10px; ">
        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit.
    </p>    
</div>

.ShadowWrap { position: relative; }
.borderWrap span { position: absolute }

/* For every .borderWrap span element use these attributes: top, right, bottom, left and use minus values in them to position them in the right corners like shown below */

.top { 
    top: /* 0px or other value that places the top where you want */; 
    left: /* 0px or other value that places the left side where you want */; 
    right: /* 0px or other value that places the right side where you want */; 
}

filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=3);