Quick Note about Box-Sizing/Box-Shadow
box-sizing
box-sizing
is used to tell the browser what the sizing properties (width
and height
) should include.
It has following properties:
-
content-box
: Default.border
,padding
andmargin
is not included in countingwidth
/height
(includemin-/max-
) properties. -
border-box
: thewidth
/height
properties includes content,padding
andborder
, but not includemargin
-
initial
/inherit
: set to default value/inherit from its parent
box-shadow
The website cssmatic contains a very good box-shadow generator to generate/understand box-shadow
better.
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).0
means 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).0
meas same size as box item. Negative value means smaller than box item area. -
color
: Optional. Any color code.rgba
is a good option to includes opacity for shadow. Such asrgba(0,0,0,0.75);
.