为内容框创建斜角效果

Question

我一直在为一个程序开发 CSS3 样式表。这是它当前的外观：

正如你所看到的，我喜欢这个设计，因为它非常干净 - 但令我印象深刻的一件事是它非常平坦。

/* REPORT */
.reportBox{
    margin: 30px auto;
    width: 60%;
    height: 20%;
    border-radius: 6px;
    background-color: #FFFFFF;
    padding: 10px 20px;
}

.reportBox li{
    list-style:none;
}

.ulReport{
    padding-left:0;
}

我想在内容和背景之间创建更多的分离/对比。我想知道如何使白色方块具有更多的阴影或浮雕效果/斜角外观。例子：

有人可以帮我展示一个使用我所拥有的东西的例子吗？我假设我必须弄乱边框和从黑到白的不同色调。

谢谢你！

Answer 1

老实说，如果需要对比的话，我喜欢扁平的 UI 和 1px 边框，但无论如何，你都可以通过双插图来实现这种效果，box-shadow如下所示：

.border {
    box-shadow: inset 0.2em 0.2em 0.2em 0 rgba(255,255,255,0.5), inset -0.2em -0.2em 0.2em 0 rgba(0,0,0,0.5);
}

演示： http: //jsfiddle.net/96saR/