Quick Note about Box-Sizing/Box-Shadow
box-sizing is used to tell the browser what the sizing properties (
height) should include.
It has following properties:
marginis not included in counting
heightproperties includes content,
border, but not include
inherit: set to default value/inherit from its parent
The website cssmatic contains a very good box-shadow generator to generate/understand
box-shadow has six parameters with optional ones. Its syntax is:
/*Option 1*/ box-shadow: none; /*Option 2*/ box-shadow: (inset) h-shadow v-shadow blur spread color /*Option 3*/ box-shadow: initial/inherit
Here is a list of properties in Option 2:
inset: Optional. Shadow is towards inside of box. If ommited, shadows is expand towards out.
h-shadow: Required. The position of horizonal shadow. Negative values means the whold shadow box is moving towards left. Positive values means the box moving towards right.
v-shadow: Required. the position of vertical shadow. Negative values means the whole shadow box is moving towards top. Positive values means the box moving towards down.
blur: Optional. represents how much 'transition' effect this shadow have (i.e. the transition process from box color to container color).
0means shadow box is all real color/no transition.
spread: Optional. from center of shadow, how large the shadow can be (can be understand as shadow area).
0meas same size as box item. Negative value means smaller than box item area.
color: Optional. Any color code.
rgbais a good option to includes opacity for shadow. Such as