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

Question

我有这样设计的盒子

基本上，我需要对它们进行编码，以便它们可以根据内部内容的大小在高度方向和宽度方向上任意变化。 加上阴影效果必须透明，因为背景颜色可能会改变。

做到这一点的最佳方法，使其可以在所有浏览器中使用？ （IE6 +，FF，Opera，Safari，Chrome）

Answer 1

如果您不需要IE6，则可以使用非常干净轻巧的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中使用）。