CSS box-shadow

Box-shadow:

.box-shadow {
    box-shadow: 4px 4px 4px 1px #555;
    margin: 10px;
    padding: 10px;
    background: #ffa;
}
 
.box-shadow-inset {
    box-shadow: inset 4px 4px 4px 1px #555;
    margin: 10px;
    padding: 10px;
    background: #ffa;
}
<div class="box-shadow">
    <h3>box shadow:</h3>
    <ol>
        <li><strong>The horizontal offset</strong> of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box;</li>
        <li><strong>The vertical offset</strong> of the shadow, a negative one means the box-shadow will be above the box, a positive one means the shadow will be below the box;</li>
        <li><strong>The blur radius (optional)</strong>, if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be;</li>
        <li><strong>The spread radius (optional)</strong>, positive values increase the size of the shadow, negative values decrease the size. Default is 0 (the shadow is same size as blur);</li>
        <li><strong>Color</strong>;</li>
    </ol>
</div>
 
<div class="box-shadow-inset">
    <h3>box shadow inset</h3>
</div>
​​

Leave a Reply

Your email address will not be published. Required fields are marked *