”;
The box-shadow property of CSS is useful in adding a shadow effect around an element. One or more shadow effects can be added, separated by commas.
The box shadow is described by X and Y offsets relative to the element, blur, spread radius and color.
Possible Values
-
inset:
-
Shadow is assumed to be a drop shadow, if no value is specified.
-
If inset is used, the shadow is drawn inside the border, above the background, but below content.
-
-
<offset-x>: Specifies the horizontal distance in <length> terms. Negative value positions the shadow to the left of element.
-
<offset-y>: Specifies the vertical distance in <length> terms. Negative value positions the shadow above the element.
-
<blur-radius>:
-
Sets the radius for the blur effect. Third <length> value.
-
Larger the value, bigger is the blur.
-
Negative values are not allowed.
-
In absence of a value, it is 0, which makes the edges of shadow sharp.
-
-
<spread-radius>:
-
Sets the size of the shadow. Fourth <length> value.
-
Positive values make the shadow to grow bigger.
-
Negative values make the shadow to shrink.
-
In absence of a value, it is 0, which makes the shadow of size same as the element.
-
-
<color>: Color values for possible keywords and color notations, such as, color name, hex value, rgb, etc.
Applies to
All the HTML elements.
DOM Syntax
object.style.boxShadow = "none | inset 10px 10px 5px rgb(255, 255, 255)";
CSS box-shadow – inset Value
Here is an example:
<html> <style> div { margin: 4em; padding: 1em; height: 80px; width: 80px; display: inline-block; } #a { box-shadow:10px 10px 10px 2em #f4aab9; } #b { box-shadow:inset -20px -3em 3em rgba(228, 228, 35, 0.8); } #c { box-shadow: 5px 15px 3px rgb(226, 67, 228); border: 1px solid black; } </style> <head> </head> <body> <div id="a"></div> <div id="b"></div> <div id="c"></div> </body> </html>
”;