Question

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

Apple如何使用圆角进行投影箱？

Answer 1

通常只需在photoshop中设计盒子并将阴影输出就可以完成。但是，有一些新的CSS3技术可以让你想到代码：

Answer 2

如上所述，我有答案：

效果的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;
}

Check out a jsfiddle此代码可以看到它的实际效果。

希望这有助于任何人寻找快速简便的影子框。

〜TheEternalAbyss

Answer 3

Google Chrome’s Inspector或Firefox’s Firebug extension可以显示他们正在使用的HTML和CSS。

Answer 4

你应该添加

-webkit-box-shadow

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

如何使用像Apple的网站那样的HTML / CSS创建一个阴影框？

4 个答案: