Menu
How can I do this? I want my element to look as though it has a shadow underline. I don't want the shadow for the other 3 sides.
289
Use the box-shadow Property to Set the Bottom Box Shadow in CSS. We can use the box-shadow property to set the shadow only at the bottom of the box. The box-shadow property sets the shadow of the selected element.
The following example shows how to set Box-Shadow so that it will only show a shadow for the inset top and bottom of an element. The key to accomplishing this is to set the blur value to <= the negative of the spread value (ex. inset 0px 5px -?
To apply a shadow effect only on one side of an element set the blur value to a positive number and set the spread value to the same size but with a negative sign. Depending on which side you want the shadow on, set the offset value as follows: Top shadow: offset-x: 0 and offset-y: -5px.
The presence of the inset keyword changes the shadow to one inside the frame (as if the content was debossed inside the box). Inset shadows are drawn inside the border (even transparent ones), above the background, but below content. <offset-x> <offset-y>
Do this:
box-shadow: 0 4px 2px -2px gray; It's actually much simpler, whatever you set the blur to (3rd value), set the spread (4th value) to the negative of it.
96
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
