Box model is one of the most popular div effects we often see in webpage designing, the box model effect is made of multiple properties using CSS style attributes, here we learn how to write css for box shadow, also known as box model.
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
So to create some perfect example of Box Model, we use all following properties
Here is the code for CSS Style Box Model
.boxModel1 { width: 300px; border: 25px solid red; border-radius:15px; padding: 50px; margin: 20px; }
In this example, we have set some box shadow effect of a div element using box-shadow properties.
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
.myDivOval { width: 140px; height: 50px; background-color: blue; border-radius: 100px / 50px; box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2); }
.myDivCiecle { width: 100px; height: 100px; background-color:blue; border-radius: 50%; box-shadow: 12px 12px 2px 1px red; }
box-shadow: 10px 5px 5px 5px red; // OR box-shadow: 5px 10px green, -1em 0 .4em red;