css - box shadow left position using percent value -
how can use percent value in box-shadow property?
for example one
box-shadow: -25% 0 0 #000;
chrome log said invalid value. possible so? or should use javascript?
the box-shadow
property not support percentages, can achieve similar effect using pseudo-element. there limitations technique, see comments.
example:
.shadow { background: #dddddd; padding: 1em; width: 100px; border: solid 1px #999999; position: relative;/*positioning required.*/ } .shadow:before { content: ''; display: block; position: absolute; width: 100%; height: 100%; left: 50%; top: 50%; z-index: -1;/*put shadow behind.*/ background: rgba(0, 0, 0, 0.25);/*give shadow fill.*/ box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.25);/*the spread value must greater or equal blur.*/ }
<div class="shadow">shadow 50% off center.</div>
Comments
Post a Comment