이미지를 정확하게 디자인하는 방법

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