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

Question

我有这样设计的盒子

基本上我需要对它们进行编码，以便它们可以根据内部内容，高度和宽度可以是任何尺寸。另外，阴影效果需要是透明的，因为背景颜色可以改变。

最好的方法是让它在所有浏览器中都有效？ （IE6+、FF、Opera、Safari、Chrome）

Answer 1

如果您没有 IE6 的要求，您可以使用 very clean &轻量级 jQuery Corners： 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，对它非常满意（不过它有一些错误）

• DD_Roundies 网站

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

    /*************************************************/
    /* 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）。