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