CSS:创建凸起框效果的好方法是什么? [英] CSS: What's a good way to create a raised box effect?

问题描述

也就是说，该元素的左边界和底边界需要给出弹出的3d效果.是否有一种很好的纯CSS方法来实现此效果?

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?

推荐答案

我也在试图弄清楚这个问题的同时发现了这个问题，我想您正在寻找的就是这样的

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;
}

感谢 http://sam-morrow.com/playground/css-cubes. py 寻求帮助.我不知道您可以继续在box-shadow属性中添加其他行.

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.

这篇关于CSS:创建凸起框效果的好方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！