What is the best semantic and valid method to make drop shadow around whole #wrapper? on all side

问题

What is the best semantic and valid method to make drop shadow around whole #wrapper? on all side. horizontally can be fixed but vertically should be expandable.

回答1:

If you are willing to go with another, non semantic method for IE, you could simply use CSS 3 for current (Webkit and Gecko based) browsers:

box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;

_{(source: css3.info)}

Of course, for IE you have a few other options.

Use a single image for the background with a drop shadow.
Use some CSS trickery to have a few wrapper divs with some small borders that composite the shadow.
Use javascript to create the drop shadow.

The last one has the advantage of given you the chance of using the CSS box-shadow on CSS3 enabled browsers, and the Javascript drop shadow on the rest (IE/Opera).

回答2:

Some JavaScript trick
CSS3 or custom browser styles
Use images around the #wrapper

Shadows can hardly be made semantically correct since they have no meaning. It's just a decoration (presentation) element.

回答3:

If the width is fixed I wouldn't use a wrapper I'd do like that:

<div class="box-header">
</div>
<div class="middle">
my content
</div>
<div class="box-footer">
</div>

For top and bottom classes I'd put the top and bottom shadows as a css background image.

Then I'd repeat-y a background image representing shadows on both sides of the box.

If you don't care about cross-browser compatibility, prefer using CSS3 properties.

来源：https://stackoverflow.com/questions/2132687/what-is-the-best-semantic-and-valid-method-to-make-drop-shadow-around-whole-wra

标签

css

xhtml