使用CSS创建嵌入式暗阴影效果

Question

我试图在CSS中获得类似于插入阴影效果的效果,如下图所示:

沉没按钮的图像http://gyazo.com/5c3178208bb904b3502a83a7490f7ffc.png

有没有人知道如何用CSS获得这种效果？

Answer 1

这里的关键是多个盒子阴影,从左上角开始有一个更深的黑色阴影,下面有一个非常细微的阴影,比背景略亮.

请注意,box-shadow的形式是"x-offset,y-offset,blur,color"

学习使用模糊量和多个阴影,你可以做一些非常好的效果.

示例样式(用于在#222的背景上显示):

.button {
    display:inline-block;
    padding: 10px 15px;
    color: white;
    border-radius: 20px;
    box-shadow: inset 2px 3px 5px #000000, 0px 1px 1px #333;
}

Answer 2

答案已经给你了 ( box-shadow: inset ..)，所以这里是它如何工作的快速演示：

http://jsfiddle.net/L6nJj/

重要的部分是box-shadow: inset 2px 2px 3px 0 red。

有关可用选项的说明：https://developer.mozilla.org/en/css/box-shadow#Values

请务必考虑浏览器对 的支持box-shadow，即它在旧版本的 IE 中不起作用，但在其他“任何地方”都可以工作：http ://caniuse.com/css-boxshadow