如何用HTML/CSS创建一个阴影框，比如Apple的网站很好？

苹果的网站有许多视觉上吸引人的元素，有时候刚刚起步的网页开发人员可能会看到某些元素，并想知道如何再现这种外观。所以我提出了这个问题（并将提供答案）：如何用HTML/CSS创建一个阴影框，比如Apple的网站很好？

Apple如何处理带圆角的投影箱？

2011-01-14 TheEternalAbyss

你试图使用样式表检查的开发工具，以找出加

-webkit-box-shadow

？ – Spudley 2011-01-14 15:41:00

通常它是通过在photoshop中设计盒子并将其与已有的阴影一起导出来完成的。不过，也有新的CSS3技术，让你做它认为代码：

See this website

来源

2011-01-14 15:41:19

是的，我之前使用过Photoshop技术，但如果您希望您的网站是动态的，并且您的shadowbox能够动态更改大小并保留效果，那么它不是非常灵活。感谢您的输入:) – TheEternalAbyss 2011-01-14 15:43:47

如前所述我有了答案：

该效果的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看到它的行动。

希望这有助于任何寻找快速简单的shadowbox的人。

〜TheEternalAbyss

来源

2011-01-14 15:41:58 TheEternalAbyss

我认为他们实际上使用的是比这更多的CSS，因为您发布的代码在Safari中无法使用。 – 2011-01-14 15:44:24

它不适用于safari？嗯。我会研究一下。谢谢 – TheEternalAbyss 2011-01-14 15:46:01

Google Chrome’s Inspector或Firefox’s Firebug extension可以告诉你他们使用的HTML和CSS。

来源

2011-01-14 15:43:30

你应该WebKit引擎（Safari浏览器，镀铬），基于浏览器