如何制作与图片完全相同的设计答案

【问题标题】：how to make a design exactly as in image如何制作与图片完全相同的设计
【发布时间】：2017-03-15 01:01:43
【问题描述】：

我曾尝试从 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;
}

上面是我试过的代码。

我想要上图中的设计。我被困在这里。请帮帮我。

【问题讨论】：

您的代码与图像非常接近，那么究竟是什么问题？你想要一个额外的边框？你需要另一个 div 来做这个......

标签： html css psd

【解决方案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;
}

【讨论】：