Question

我想生成阴影。但是很难产生跨平台阴影。是否有任何在线工具可以生成跨平台（包括IE6）框阴影？

那就是我想自动生成以下代码

/* For IE 8 */
        -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
        /* For IE 5.5 - 7 */
        filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');

Answer 1

这不是最简单的任务。您可以尝试this nice generator for crossbrowser css3，然后尝试使用this nice Framework。

CSS Pie利用Internet-Explorers Capability通过.htc文件及其专有的VML格式动态增强CSS来模拟css3。它很容易设置并且工作得非常好。

某些css3内容也可以通过MS过滤器实现。

Answer 2

我无法找到生成器，但我知道您可以通过MS过滤器部分模拟它。我找到了一个article进入这一点。

Answer 3

我知道以这种方式做这件事更痛苦，但你总是可以使用图像。这可能是在IE 6中获取它们的最佳方式。根据http://www.w3schools.com/browsers/browsers_explorer.asp，只有1％的互联网用户使用IE6作为网络浏览器。你可以为IE6制作一个单独的样式表，这样就不会弄乱你的主表。

Answer 4

如果你想为旧的IE生成css投影，我建议微软自己的工具来生成阴影，这里是链接。 http://samples.msdn.microsoft.com/workshop/samples/author/filter/Shadow.htm

我不知道为所有浏览器生成的特定在线工具，但它很容易自己做这是跨浏览器css drop-shadow

的示例

#box {
    -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.33);  /* Chrome 1-25, Safari 3.2+ */
       -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.33);  /* Firefox 4-15 */
         -o-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.33);  /* Opera 10.50–12.00 */
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.33);  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */

    /* IE6 & 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=135,strength=6);
    /* IE8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=135,strength=3)";
}

我希望这会有所帮助

是否有任何在线工具可以生成跨平台（包括IE6）的盒子阴影？

4 个答案: