为跨浏览器兼容性编写弯曲阴影框的最佳方法答案

【问题标题】：Best way to code curved shadowed boxes for cross-browser compatibility为跨浏览器兼容性编写弯曲阴影框的最佳方法
【发布时间】：2011-12-04 09:44:28
【问题描述】：

我有这样设计的盒子

基本上我需要对它们进行编码，以便它们可以是任意大小的高度和宽度，具体取决于里面的内容。加上阴影效果需要透明，因为背景颜色可以改变。

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

【问题讨论】：

smileycat.com/miaow/archives/000044.php

标签： html css rounded-corners shadow

【解决方案1】：

如果您对 IE6 没有要求，您可以使用非常干净且轻量级的 jQuery Corners：http://jquery.malsup.com/corner/

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

【讨论】：

对不起，没有。但您可以简单地将阴影添加到 css： box-shadow: 0 0 2px 3px #999; -webkit-box-shadow: 0 0 2px 3px #999; -moz-box-shadow: 0 0 2px 3px #999;

【解决方案2】：

最好的方法是为现代浏览器设计您的网站，并允许诸如框阴影和边框半径之类的东西为旧版浏览器和 IE 优雅地降级。

如果您必须在 IE 中使用圆角，我会使用这种方法，我发现这种方法既简单又轻巧...

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

恐怕我无法在 IE 中使用框阴影。

【讨论】：

【解决方案3】：

实际上，IE 有一个专有的 CSS 扩展，可以让你添加阴影：

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

对于圆角，您必须使用图像或 JavaScript。我试过 DD_Roundies，我对它很满意（虽然它有一些错误）

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.) */

【讨论】：

【解决方案4】：

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

【讨论】：