How to make a shadow by css by this example?

div.drop-shadow.lifted { width: 300px; } .lifted { -moz-border-radius: 4px; border-radius: 4px; text-align: center; } .drop-shadow { position: relative; float: left; width: 40%; padding: 1em; margin: 2em 10px 4em; background: #fff; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } .lifted:before, .lifted:after { bottom: 15px; left: -2px; width: 50%; height: 20%; max-width: 300px; -webkit-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7); -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7); box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7); -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -ms-transform: rotate(-3deg); -o-transform: rotate(-3deg); transform: rotate(-3deg); } .drop-shadow:before, .drop-shadow:after { content: ""; position: absolute; z-index: -2; } .lifted:after { right: -2px; left: auto; -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -ms-transform: rotate(3deg); -o-transform: rotate(3deg); transform: rotate(3deg); } 

 <div class="drop-shadow lifted"> <p>Lifted corners</p> </div>