Design DIV block shadow effect with CSS3 box-shadow

 The original function of the box-shadow property of CSS3 is to design the shadow effect of the block. Many elements in the webpage can be presented in the form of blocks, such as image blocks, form blocks, table blocks and what we want today. In the DIV blocks introduced , these blocks can use the box-shadow property of CSS3 to increase the shadow effect. The advantage is that only a few lines of CSS syntax are needed, and the block can immediately show a beautiful shadow effect. Compared with traditional use Drawing software is easier to design, and subsequent maintenance and modification are very convenient. Let’s take a look at how to write the box-shadow attribute syntax of CSS3 , and then apply it to the example to see the results presented. Basic syntax of CSS3 box-shadow property

box-shadow:inset offset-x offset-y blur-radius spread-radius shadow color;

We have detailed usage of each parameter in " CSS3 box-shadow ", please refer to it yourself.

Use CSS3 box-shadow to design DIV block shadow effect application example

<style type="text/css">
<!--
#DIV_A{
    display:inline-block;
    background-color:#eee;
    width:150px;
    height:50px;
    margin-right:20px;
    box-shadow:3px 3px 9px yellow;
}
#DIV_B {
    display:inline-block;
    background-color:#eee;
    width:150px;
    height:50px;
    margin-right:20px;
    box-shadow:0px 0px 9px green;
}
#DIV_C{
    display:inline -block;
    background-color:#eee;
    width:150px;
    height:50px;
    margin-right:20px;
    box-shadow:-3px -3px 9px pink;
}
-->
</style>
<div id="DIV_A"></div>
<div id="DIV_B"></div>
<div id="DIV_C"></div>

Presentation of the example

In the example, we prepared a total of three different DIV blocks , and used the box-shadow property of CSS3 to help them add yellow, green and pink shadow effects. You can find more on our " Color Code Table " You can apply more colors that can be used. In addition, the direction and range of the shadow effect can be adjusted through the parameter settings of box-shadow . Please learn about the parameter usage directly from " CSS3 box-shadow ". In the example, other attributes such as background- color is used to design the background color of the block, display:inline-block is used to arrange the three blocks horizontally, width and hight are the width and height of the design block respectively, and finally the margin is the outer distance of the control block , Which is the distance between the blocks.