编码弯曲阴影框以实现跨浏览器兼容性的最佳方法

Question

我有像这样设计的盒子

基本上我需要对它们进行编码，以便它们可以在高度和宽度方面任意大小，具体取决于内部的内容。此外，阴影效果需要透明，因为背景颜色可能会发生变化。

最好的方法是这样，它适用于所有浏览器？ （IE6 +，FF，Opera，Safari，Chrome）

Answer 1

如果你没有IE6的要求，你可以使用非常干净的＆amp;轻量级jQuery角落：http://jquery.malsup.com/corner/

要在IE6中实现此效果，您需要使用表格点的奥术方法，使用半透明角落图像在每个角落中使用微小单元格。

Answer 2

最好的方法是为现代浏览器设计您的网站，并允许旧版浏览器和IE浏览器优雅地降低框阴影和边框半径等内容。

如果你必须在IE中使用圆角，我会使用这种方法，我发现它简单轻便......

http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser

我害怕IE中的盒子阴影，我很害怕。

Answer 3

实际上，IE有一个专有的CSS扩展，允许你添加阴影：

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

对于圆角，您必须使用图像或JavaScript。我尝试过DD_Roundies，我对此非常满意（虽然它有一些bug）

• DD_Roundies Website

对于其他浏览器，您可以使用：

    /*************************************************/
    /* The properties follow this format:            */
    /* property-name: x-offset y-offset blur #color; */
    /*************************************************/

    box-shadow: 0 0 4px #000; /* For Opera */
    -moz-box-shadow: 0 0 4px #000; /* Firefox */
    -webkit-box-shadow: 0 0 4px #000; /* WebKit browsers (Safari, Chrome, etc.) */

Answer 4

我强烈推荐CSS3Pie（适用于IE6-9）。