怎么给上下两个三角形加上边框阴影？

<div class="hexagon">                 <div class="top"></div>                 <div class="bottom"></div>             </div>` <style type="text/css"> .hexagon{             position: relative;             display:inline-block;             margin-right: 20px;             width: 200px;             height: 120px;             background-color: #fff;             -moz-box-shadow: 0 0 20px #ddd;             -webkit-box-shadow:0 0 20px #ddd;             box-shadow: 0 0 20px #ddd;             text-align: center;} .hexagon .top{     width: 0;height: 0;     position:absolute;     left:0;     top:-60px;     border-bottom:60px solid #fff;     border-left:100px solid transparent;     border-right:100px solid transparent; } .hexagon .bottom{     width: 0;height: 0;     position:absolute;     bottom:-60px;     border-top:60px solid #fff;     border-left:100px solid transparent;     border-right:100px solid transparent; } .hexagon .img{     width: 200px;height: 120px; display: table-cell;      vertical-align:middle;      text-align:center;      *display: block;      *font-size: 120*0.873;      *font-family:Arial; } </style>