CSS 3平铺效果

Question

我正在开发一个仪表板，我被困在一个我需要设计瓷砖效果的地方。我尝试使用box-shadow和border属性但无法复制效果！下面是一个示例图像，显示了我想要的效果！如果有人知道如何获得这种效果，请指导我！

谢谢。

代码：

.header-tile{

    height: 90px;
    min-width: 60px;
    background-color: rgb(182, 163, 163);
    float: none;
    display: inline-block;
    box-shadow: 0px 0px 1px 1px rgba(170, 170, 170, 0.64);
    margin: 0.5px;
    border: 1px solid rgba(0, 0, 0, 0.65);

}

Answer 1

你可以查看这个。 JSFIDDLE

.header-tile{

    height: 90px;
    min-width: 60px;
    background-color: rgb(182, 163, 163);
    float: none;
    display: inline-block;
    box-shadow: inset 1px 1px 1px 1px rgba(255,255,255, .46), inset -1px -1px 1px 1px rgba(0,0,0, .26);
    margin: 0.5px;
    border: 1px solid rgba(0, 0, 0, 0.65);

}

这是你想要的吗？

P.S。：您可以设置不透明度的值，以使用您为图块选择的背景颜色。

Answer 2

不完全确定你的发现有多难，但你的所有颜色都错了：

.header-tile{

    height: 90px;
    min-width: 60px;
    background-color: #28272C;
    float: none;
    display: inline-block;
    box-shadow: 0px 0px 1px 1px rgba(170, 170, 170, 0.64);
    margin: 0;
    border: 1px solid #454547;
    color:White;

}

http://jsfiddle.net/kxqqd/

Answer 3

您是否尝试过让阴影和边框稍微厚一些以获得更明显的效果？使用你的CSS我做了以下小提琴：

div {
    height: 150px;
    min-width: 150px;
    margin: auto;
    background-color: rgb(182, 163, 163);
    float: none;
    display: inline-block;
    box-shadow: 0px 0px 4px 4px rgba(170, 170, 170, 0.8);
    margin: 0.5px;
    border: 1px solid rgba(0, 0, 0, 0.5);
}

JSFiddle

我也改变了颜色。