0

我有这样设计的盒子

imgur.com/vMN0T.gif

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

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

4

4 回答 4

0

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

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

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

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

于 2010-07-14T16:11:44.887 回答
0

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

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

对于圆角，您必须使用图像或 JavaScript。我尝试了 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.) */
于 2010-07-17T07:20:07.230 回答
0

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

于 2011-12-04T01:44:28.307 回答
0

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

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

于 2010-07-12T21:52:52.960 回答