css - css3 边框和框阴影效果

Question

我不知道怎么做，但我想制作一个边框，并使用 box-shadow 向该边框添加第二个较亮的图层，从而为整个事物增加深度，就像在这张图片中一样。

关于如何完成的任何建议？左边框是我想要实现的。

Answer 1

你可以尝试这样的事情，使用box-shadow：

body { background: #555; }
div {
    background: #666;
    border: 1px solid #393939;
    box-shadow: inset 0 0 1px #999;
    width: 200px;
    height: 150px;
    margin: 20px;
    border-radius: 4px;
}

http://jsfiddle.net/2n2RE/

然后只需根据需要调整颜色值。您还可以更改模糊量box-shadow以实现不同的外观。