CSS 로 오목한 모양과 볼록한 모양을 표현하는 방법입니다.
<div style="
border:1px solid #222;
box-shadow: 0 1px 1px #424440 inset, 0 -1px 0px #777 inset;
padding: 2px 2px;
">
</div>
Arrow Down
<div style="
border:1px solid #222;
box-shadow: 0 3px 3px #424440 inset, 0 -1px 0px #777 inset;
padding: 2px 2px;
">
</div>
Arrow Down
<div style="
background:#ffb27d;
border:1px solid #222;
box-shadow: 0 3px 3px #424440 inset, 0 -1px 0px #555 inset;
padding: 2px 2px;
">
<p>...</p>
</div>
Arrow Down
<div style="
box-shadow: 0 1px 1px #999 inset;
border: 1px solid #333;
padding: 2px 2px;
border-radius: 5px;
background: #545658;
min-height: 2em;
">
<p style="text-align: center;">이렇게 보여요</p>
</div>
Arrow Down
<div style="
box-shadow: 0 3px 3px #999 inset;
border: 1px solid #333;
padding: 2px 2px;
border-radius: 5px;
background: #545658;
min-height: 2em;
">
<p style="text-align: center;">이렇게 보여요</p>
</div>
Arrow Down
<div style="
box-shadow: 0 5px 5px #999 inset, 0 -5px 5px #444 inset;
border: 1px solid #333;
padding: 2px 2px;
border-radius: 5px;
background: #545658;
min-height: 1em;
">
<p style="text-align: center;">이렇게 보여요</p>
</div>
Arrow Down
<div style="
box-shadow: 0 8px 8px #999 inset, 0 -8px 8px #444 inset;
border: 1px solid #333;
padding: 2px 2px;
border-radius: 5px;
background: #545658;
min-height: 1em;
">
<p style="text-align: center;">이렇게 보여요</p>
</div>
Arrow Down
<div style="
box-shadow: 0 8px 8px #c8ebfa inset, 0 -10px 0px #065d82 inset;
background: #007aae;
border-radius: 15px;
border: 1px solid #0e4d68;
padding: 3px 3px;
min-height: 1em;
width:200px;
">
<p style="text-align: center;">이렇게 보여요</p>
</div>
Arrow Down
http://www.beautifulcss.com/archives/635