IE上的CSS兼容性。框阴影

Question

我正在创建一个网站，我需要设置像image here这样的方框。虽然它们的动态内容的高度并不固定，但我使用的是-webkit-border-image和-moz-image-border，而且效果非常好。不幸的是，IE是一个坏人，我希望它能够正常显示。

我考虑过将CSS3与box-shadow以及-webkit-gradient和-moz-linear-gradient一起使用，但IE再次无效。

我想知道一些CSS技术，以便我可以使用渐变框和div内的阴影，其大小不确定（我的意思是动态高度和宽度）

Answer 1

Here is the possible solution :)

Answer 2

如果宽度是固定的，并且背景是同质的，那么即使在IE6上也是如此：

1. 拍摄照片，剪切中间渐变/白色，使其透明（阴影应保持不透明），灰色至白色。将它切成两块 - 顶部可以拉伸到任何高度而不改变外观，底部有圆角（bg-mid.png和bg-bottom.png）
2. 顶部渐变部分也被剪切为1像素宽的高图像。
3. 撰写此HTML代码：

<div class="gradient-bg">
    <div class="top-content">
        your content
    </div>
    <div class="bottom-shadow">
    </div>
</div>

然后，相应地设计它们。将渐变图像放置为顶部div背景，将bg-mid.png放置为顶部内容背景（使用repeat-x），将底部阴影放置为bg-bottom.png。

对于IE6，您需要使用conditional CSS statements, and filter CSS attribute来加载带有Alpha通道的图像。