1

Apple 的网站有很多视觉上吸引人的元素，有时初出茅庐的 Web 开发人员可能会看着某些元素，想知道如何重现这种外观。所以我提出这个问题（并将提供答案）：

Apple 是如何做圆角的 drop shadowbox 的？

4

4 回答 4

1

通常只需在 Photoshop 中设计框并将其与已经存在的阴影一起导出即可。然而，有一些新的 CSS3 技术可以让你通过代码来完成它：

看到这个网站

于 2011-01-14T15:41:19.487 回答
1

如前所述，我有答案：

效果的css如下

.content {
    background-color: #fff;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    -moz-border-radius: 4px 4px 4px 4px;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 4px 4px 4px 4px;
    border-color: #E5E5E5 #DBDBDB #D2D2D2;
    border-style: solid;
    border-width: 1px;
    height: 210px;
    width: 320px;
}

查看此代码的 jsfiddle 以查看它的实际效果。

希望这可以帮助任何寻找快速简便的影子盒的人。

~永恒的深渊

于 2011-01-14T15:41:58.737 回答
0

Google Chrome 的 Inspector或Firefox 的 Firebug 扩展可以向您显示他们正在使用的 HTML 和 CSS。

于 2011-01-14T15:43:30.207 回答
0

你应该添加

-webkit-box-shadow

用于基于 webkit 引擎（safari、chrome）的浏览器

于 2011-01-14T15:43:55.757 回答