06. Box Border Effects box-shadow
Just like how we can apply a shadow on text, we can also apply a shadow on a box.
Box Shadow
To add a shadow around a box, we can use the box-shadow property.
There are six values that we must pass it, in order:
- Horizontal offset
- How far the shadow should be off to the right.
- Vertical offset
- How far the shadow should below the box edge.
- Blur
- To blur our shadow, we specify our third value, or the blur-radius.
- The higher the value, the more blurry our shadow becomes.
- Spread distance
- The higher the value, the larger the shadow.
- Color
- Lastly, we may specify a color, the default being black.
- Inner Shadow (optional)
- To add an inner shadow, we insert the value "inset".
The following code will produce the Sample Box below:
#box {
box-shadow: 2px 4px 7px 2px blue;
margin: 10px;
padding: 10px;
}Aching back from coding all day?
Self-Massage Tool
Relieve spasms, tight muscles, trigger points and pressure points with the Body Back Buddy! This trigger point massage is designed to help you self-message any area of your body - especially those that are hard to reach. Keeping your muscles relaxes and out of contraction is importan in helping to reduce pain and prevent muscle injury.
$ Check price
(3,443+ reviews) Build modern and responsive webpages
HTML & CSS
This book teaches HTML as if it's for anyone - hobbyists, students, and professionals - and it's full-color throughout. It utilizes information graphics and lifestyle photography to explain the topics in a simple way that is engaging. You can progress through the chapters from beginning to end or just dip into topics of particular interest at your leisure.
$ Check price(926+ reviews) Ad