How do I create a shadowed box in with HTML/CSS like Apple's website so nicely has?

Apple's website has a lot of visually appealing elements and sometimes the fledgling web dev开发者_Go百科eloper may look at certain elements and wonder just how to reproduce that look. So I pose the question (and will provide the answer):

How does Apple do the drop shadowbox with rounded corners?

Usually it's done by just designing the box in photoshop and exporting it with the shadow already on it. However, there are new CSS3 techniques that allow you to do it thought code:

See this website

As mentioned I have the answer:

the css for the effect is as follows

.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 of this code to see it in action.

Hope this helps anyone looking for a quick and easy shadowbox.

~TheEternalAbyss

Google Chrome’s Inspector or Firefox’s Firebug extension can show you the HTML and CSS they’re using.

you should add

-webkit-box-shadow

for webkit engine (safari, chrome) based browsers