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

Popular posts from this blog

python - mat is not a numerical tuple : openCV error -

c# - MSAA finds controls UI Automation doesn't -

wordpress - .htaccess: RewriteRule: bad flag delimiters -