css - CSS 3 平铺效果

Question

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

谢谢你。

编码 ：

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

}

这是你想要的吗？

PS：您可以设置不透明度值以使用您为瓷砖选择的背景颜色。

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

我也稍微改变了颜色。