如何使设计与图像完全一样

Question

我试图从PSD设计一个网站，因为我无法设计一些区域。因为这对我来说更复杂。但我已经尝试了很多。

.single {
    width: 200px;
    height: 200px;
    background: #dddedf;
    display: inline-block;
    border: 15px solid #BDBEBB;
    -webkit-box-shadow: 0 0 15px 2px #898B8A;
    -moz-box-shadow: 0 0 15px 2px #898B8A;
    box-shadow: 0 0 15px 2px #898B8A;
}

以上是我尝试的代码。

我希望设计完全符合上图。我被困在这里。请帮帮我。

Answer 1

请检查，如果您有任何疑问，请告诉我。

HTML：

<div class="upper">
    <div class="inner">
        Hello World
    </div>
</div>

CSS：

.upper {
    padding: 60px;
    background: #bbbebc;
    border: 30px solid #a9abaa;
}
.inner {
    height: 500px;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
    width: 100vw;
    background: #dddedf;
}