CSS: What's a good way to create a raised box effect?

问题

That is, the left and bottom borders of the element need to give a 3d effect of it popping out. Is there a good, purely-CSS way to accomplish this effect?

回答1:

I found this question while trying to figure this out as well, and I think what you're looking for is something like this http://jsfiddle.net/9Lt2477w/.

.raisedbox { 
    padding: 10px;
    border: 1px solid #77aaff;
    box-shadow:  -1px 1px #77aaff,
         -2px 2px #77aaff,
         -3px 3px #77aaff,
         -4px 4px #77aaff,
         -5px 5px #77aaff;
}

Thanks to http://sam-morrow.com/playground/css-cubes.py for the help here. I didn't realize you could just keep adding additional lines into the box-shadow property.

回答2:

#foo {
    /* ... */
    border:8px outset #999;
    -webkit-box-shadow: 5px 5px 15px rgba(0,0,0,0.4);
    -moz-box-shadow: 5px 5px 15px rgba(0,0,0,0.4);
}

Here's the example live: http://jsfiddle.net/sjkXS/1/
Yes, the effect here is cheesily-extreme, indended to showcase what is possible.

回答3:

You can base your solution on this:

-webkit-box-shadow: 0 0 10px rgb(0,0,0);
-moz-box-shadow: 0 0 10px rgb(0,0,0);

回答4:

You could use the border-bottom-style and border-right-style, just as StackOverFlow does with the tags.

Use the styles inset and outset.

回答5:

For compatibility with more browsers you might want to simulate the inset/outset stuff by just adding a normal border bottom and right or top and left which is darker than the color of the div, in fact that is what Stackoverflow is using currently for the tags in my browser.

来源：https://stackoverflow.com/questions/4620239/css-whats-a-good-way-to-create-a-raised-box-effect

标签

css

effect

border