<div class='left'>左</div>
<div class='right'>右</div>
<div class='top'>上</div>
<div class='bottom'>下</div>
<div class="position">
    <p>box-shadow: -7px 0 5px -5px #333</p>
    <p>box-shadow: 7px 0 5px -5px #333</p>
    <p>box-shadow: 0 -7px 5px -5px #333</p>
    <p>box-shadow: 0 7px 5px -5px #333</p>
</div>
body {
    padding: 20px;
    line-height: 24px;
}
.left,
.right,
.top,
.bottom {
    margin: 30px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border: 1px solid #000;
    text-align: center;
}

//
.left {
    box-shadow: -7px 0 5px -5px #333;
}

.right {
    box-shadow: 7px 0 5px -5px #333;
}

.top {
    box-shadow: 0 -7px 5px -5px #333;
}

.bottom {
    box-shadow: 0 7px 5px -5px #333;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.