如何制作与图像完全一样的设计

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

如何制作与图像完全一样的设计

how to make a design exactly as in image

html

css

psd