如何在box-shadow属性中使用百分比值？
例如这个
box-shadow: -25% 0 0 #000;
chrome log表示它的值无效。有可能这样做吗？或者我应该使用javascript吗？
答案 0 :(得分：1)
box-shadow属性不支持百分比，但您可以使用伪元素实现类似的效果。这项技术有一些限制，请参阅评论。
示例：
.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 the shadow behind.*/
background: rgba(0, 0, 0, 0.25);/*Give the shadow a fill.*/
box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.25);/*The spread value must be greater than or equal to the blur.*/
}<div class="shadow">shadow 50% off center.</div>
答案 1 :(得分：0)
可以使用viewport-width和viewport-height值。
示例：box-shadow: -25vw 0 0 #000;
这是屏幕高度和宽度的百分比。
答案 2 :(得分：0)
不，你不能。
根据box-shadow上的W3C规范，它仅接受Distance Unit type <length>作为值：
<shadow> = inset? && <length>{2,4} && <color>?
虽然<percentage>是Numeric Data Types的子类型，但不是<length>的一部分。请参阅Values and Units上的W3C规范。
您可以使用js来计算或考虑固定值。
答案 3 :(得分：0)
申请百分比不会起作用。但是，您可以使用代表视口宽度和高度的vw和vw。
box-shadow: <center-x> <center-y> <blur size> <blur-offset> <blur-color>
box-shzdow: -25vw 0 0 0#000;
答案 4 :(得分：0)
你可以用作vw和vh
vh =视口高度的1/100或容纳块的高度的1％
vw =视口宽度的1/100或容纳块的宽度的1％
vmin和vmax = 1/100视口尺寸是最小值或最大值，无论哪个用于
视口百分比长度相对于初始包含块的大小
在您的情况下，如果您希望box-shadow为％，那么您将不得不考虑视口长度
代码示例
box-shadow: 20vw 0 0 #000;
如果您想要设置其他尺寸的阴影，即左上角和右下角，您可以尝试这个阴影
box-shadow : 15vw 10vh 10vh 5vh #000;