Box Model CSS Class Example

CSS Style Box Shadow Effect

CSS Box Model is a container that has multiple css properties like border, margin, and padding, so the Box Model look depend on what values we set for each above property

Let's create some Box Model using CSS Style to understand the impact of each property

Box model CSS properties

So to create some perfect example of Box Model, we use all following properties

• Border
• Margin
• Padding
• Inside Content

Here is the code for CSS Style Box Model

.boxModel1 {
    width: 300px;
    border: 25px solid red;
    border-radius:15px;
    padding: 50px;
    margin: 20px;
}

box model shadow example

Here is the css code for box model shadow effect

.boxModel2 {
    background-color: #fff;
    width: 300px;
    box-shadow: 20px 20px 10px grey;
    border: solid 1px #808080;
    padding: 50px;
    margin: 20px;
}

The above effect has following properties

• h-offset
  Required field, The horizontal offset of the shadow
• v-offset
  Required field, The vertical offset of the shadow
• blur
  Optional field, increase the number, to see more blurred
• spread
  Optional field, positive value increases the size of the shadow
• color
  Optional field, default value is the text color
• css for div Oval shape, radius Oval Css

   .myDivOval {
      width: 140px;
      height: 50px;
      background-color: blue;
      border-radius: 100px / 50px;
      box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2);
      }
  

• css for div Circle, radius Circle Css

  .myDivCiecle {
      width: 100px;
      height: 100px;
      background-color:blue;
      border-radius: 50%;
      box-shadow: 12px 12px 2px 1px red;
  }
  

• We can apply box-shadow on html element like div, span, p tag etc.

  box-shadow: 10px 5px 5px 5px red;
  // OR
  box-shadow: 5px 10px green, -1em 0 .4em red;