为内容框创建斜角效果

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

您可以使用border:outset CSS规则：

button{
border:5px outset grey;
}

效果很好但你对颜色的外观控制有限。如果定义每种颜色，则可以完全控制：

button{
    border-top:5px solid lightgrey;
    border-bottom:5px solid grey;
    border-left:5px solid lightgrey;
    border-right:5px solid grey;
}

任何一个都有效，开头更容易，但定义所有颜色可以让你更有控制力。

JSFiddle Example

Answer 2

老实说，我喜欢平面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/