I need to create a box-shadow on some block
element, but only (for example) on its right side. The way I do it is to wrap the inner element with box-shadow
into an outer one with padding-right
and overflow:hidden;
so the three other sides of the shadow are not visible.
Is there some better way to achieve this? Like box-shadow-right
?
EDIT: My intentions are to create only the vertical part of the shadow. Exactly the same as what repeat-y
of the rule background:url(shadow.png) 100% 0% repeat-y
would do.
Yes, you can use the shadow spread property of the box-shadow rule:
.myDiv
{
border: 1px solid #333;
width: 100px;
height: 100px;
box-shadow: 10px 0 5px -2px #888;
}
<div class="myDiv"></div>
The fourth property there -2px
is the shadow spread, you can use it to change the spread of the shadow, making it appear that the shadow is on one side only.
This also uses the shadow positioning rules 10px
sends it to the right (horizontal offset) and 0px
keeps it under the element (vertical offset.)
5px
is the blur radius :)