html - 使用 CSS 创建嵌入的深色阴影效果

Question

我正在尝试在 CSS 中获得类似于插入阴影效果的效果，如下图所示：

_{（来源：gyazo.com）}

有谁知道我如何使用 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

Answer 3

查看 CSS3box-shadow属性，特别是插入框阴影。本文中的示例 L应该提供您正在寻找的效果。