Question

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

这是最好的方法吗？

这种结构好吗？如果是，我如何设置“bx3”图像重复直到“bx4”？

        <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>

1：盒子 2,3：右边部分（顶部，中心（重复） 4,5,6：底部（左，中（重复），右）

以下是Lollero答案的一个例子： http://jsfiddle.net/kRCA7/22/

.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%;
}

Answer 1

有点暗示。

http://jsfiddle.net/kRCA7/

HTML：

<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>

CSS：

.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 */; 
}

请注意，此结构适用于所有方面..但您可以删除不需要的边和角...

编辑：实际上标签.borderWrap可能会在某些浏览器的某些情况下产生不必要的副作用..不太确定..你可以单独为每个边框元素分配位置绝对值，或者给它们所有常见的类，然后.shadow {position：absolute / *以及您可能想要包含的其他一些属性* /}

Answer 2

如果您必须具有旧的IE兼容性，请使用Shadow filter。 JSFiddle example

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

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

2 个答案: