Css 为内容框创建倒角效果

我一直在为一个程序编写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;
}

我想在内容和背景之间创造更多的分离/对比。 我想知道如何使白色正方形看起来更像阴影或浮雕效果/斜面。 例如：

有人能用我的东西给我举个例子吗？我想我必须弄乱边界和从黑到白的不同色调

---

谢谢大家!

您可以使用

边框：开始

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

任何一种都可以，开始时更容易，但定义所有颜色会让您更容易控制

---

老实说，如果需要对比，我喜欢平面UI和1px边框，但在任何情况下，您都可以通过双插入

框阴影来实现这种效果，如下所示：

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

演示：