css border에 그림자 효과 주기

box-shadow: 10px 10px grey;

box-shadow: -10px -10px grey;

box-shadow: 10px 10px 20px grey;

box-shadow: 10px 10px 20px 5px grey;

box-shadow: 10px 10px 20px 5px grey inset;

box-shadow: 0px 0px 20px 10px rgba(102, 186, 255, 0.4);

box-shadow:64px 64px 24px 40px rgba(0,0,0,0.4),12px 12px 0px 18px rgba(0,0,0,0.4) inset;

box-shadow는 레이아웃에 영향을 미치지 않음

box-shadow: 10px 10px #BCE55C, 20px 20px #CEF279, 30px 30px #E4F7BA;

html 자식 div의 중앙 정렬

심플하게

<div id="bg" style="width: 20%;height: 20%;background-color: yellow;">

    <div id="item" style="width: 50%;height: 50%;background-color: red;    margin: auto;text-align: center;">        <p>item</p>    </div></div>

자식 div(item) 의 width 값과 margin:auto 가 있으면 부모 div(bg) width의 가운데에 위치함.

vertical 중앙으로 자식 div를 위치하고 싶을때 아래와 같이

<div id="bg" style="width: 200px;height: 200px;background-color: yellow;
    display: table-cell;vertical-align: middle;">    
    <div id="item" style="width: 100px;height: 100px;background-color: red;
    margin: auto;text-align: center;display: block;">
        <p>item</p>    
    </div>
</div>

-----------------------------------------

html  ==============================
<div id="container">
  <div id="block">
    <div class="menu-icon-style menu-text-style background-color-red no-margin-left"    >
  360vr vod
    </div>
    <div class="menu-icon-style menu-text-style">
      360 image
    </div>
</div>

css ================================

#container {
    width:600px;
    height:300px;
    background-color:#191970;
    text-align:center;
    vertical-align:middle;
    display:table-cell;
}
#block {  
    background-color:rgba(255, 215, 0, 0.54);;
    display:inline-block;
}
.menu-icon-style {
  width: 200px;height: 200px;
    background-color: green;float: left;
    border-radius: 20px;border: 5px solid yellow;
    text-align:middle;line-height:200px;
    margin-left: 50px;"
}

.menu-text-style{
    font-size: 27px;color: white;
    font-family: inherit;font-weight: bold;
}

.background-color-red {
  background-color: red;
}

.no-margin-left {
  margin-left:0px;
}