Can we create a wider box-shadow in CSS than the actual HTML element it is being applied to, while maintaining the same height as the element? Increasing the spread of the shadow typically increases the height as well. In the provided code snippet, the maximum width of the box-shadow matches the width of the .box div. Is there a specific reason that limits the box shadow from extending beyond the HTML element's boundaries, or is there a restriction on this?
.container {
background-color: gray;
height: 100px;
width: 100px;
}
.box {
background-color: blue;
height: 50px;
width: 50px;
box-shadow: 55px 0px 0px 0px rgba(0, 0, 0, .2);
}
.container-spread {
background-color: gray;
height: 100px;
width: 100px;
}
.box-spread {
background-color: blue;
height: 50px;
width: 50px;
box-shadow: 55px 0px 0px 5px rgba(0, 0, 0, .2);
}<div class="container">
<div class="box">box</div>
container
</div>
<br>
<br>
<div class="container-spread">
<div class="box-spread">box</div>
container
</div>