CSS3盒子阴影大小以百分比为单位

Question

可以通过百分比设置盒子阴影的大小和偏移量吗？我目前使用这样的一个类，但是放大会改变它的大小和距离：

    .shadowright
    {
        -webkit-box-shadow: 5px 5px 10px #454545;
        -moz-box-shadow: 5px 5px 10px #454545;
        -o-box-shadow: 5px 5px 10px #454545;
        box-shadow: 5px 5px 10px #454545;             
    }

- iSofia

---

我不明白你在问什么，如果你放大它会使一切变大，你想要发生什么？ - Banana

嗯...以前从未尝试过使用百分比来做那件事。也许你可以尝试使用媒体查询吗？ - user2539369

放大似乎对我没有任何奇怪的影响。它只是像其他所有东西一样缩放。 - ajp15243

我正在尝试开发一个可以随着浏览器窗口大小缩放的流体布局。由于所有度量都是以百分比为单位，因此放大或缩小不会使元素变大或缩小；只有重新调整浏览器窗口大小才能实现这一点。但是，当进行缩放时，盒子阴影的大小和距离会自行扩展和收缩。无论如何，使用EM而不是PX似乎效果很好。 - iSofia

你需要媒体查询和特定于媒体的CSS。 - VikingBlooded

Mozilla对HTML、CSS和JavaScript有非常好的文档。请参考以下链接了解更多关于box-shadow的内容：https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow - Sreenath Nannat

Answer 1

根据W3C规范，否。引用如下：

计算值：任何作为绝对长度的 <length> ；任何指定的颜色计算后；否则按照指定的。

注意：相对值（百分比）无效。

- TylerH

---

@iSofia 很好的问题。简短的回答是：不行。长的回答是：EM 是可扩展的，但它不是相对于同样的意义。EM 固定于当前的字体大小。如果你改变了字体大小，EM 就会被重新声明。百分比在定义上总是相对于其他东西而不能独立存在。相反，1em 默认情况下等于 12px（字体大小）。换句话说，EM 是一个变量。 - TylerH

你是对的；谢谢你的答案。它之所以有效，是因为有一个JavaScript函数会在客户区域改变大小时重新调整字体大小。尽管如此，这仍是一个可接受的解决方案。 - iSofia

我需要澄清一下（为了自己），上面的评论应该是16px而不是12px。我犯了一个错误，混淆了浏览器的默认字体大小和文本文档的字体大小。 - TylerH

Answer 2

我在谷歌上搜索了一种比我想到的更好的解决方案，这对于所有正在寻找可能解决方案的人都有帮助。

.shadowright
{
  width: 20%;
  font-size: 20vw; // if you want the box-shadow to equal it's width
  box-shadow: 1em 1em 1em red;
}

- Lemnis

---

我有什么误解吗？我知道在你的情况下box-shadow是20vw偏移，但20vw并不等于20%。为什么你说“如果你想让box-shadow等于它的宽度”？顺便说一句，我认为对于原始的@iSofia问题，只需将em分配给box-shadow即可，假设他或她希望它与字体大小相关。 - Eric

@Eric，在这种情况下，如果元素占整个宽度的20％，那么他设计的方式可以确保1em等于元素的总大小（概念上为100％），而不是20％，因为20％是相对于其父级的大小。然后按照这个逻辑，如果您想要阴影中元素的20％偏移量，只需使用0.2em即可。我必须承认这很令人困惑。 - Mig

Answer 3

经过一些尝试和错误，我找到了一个解决方案（虽然是使用今天的CSS ^^）：虽然您不能使用百分比值，但可以使用带有小数的calc。

div[id^=shadow] {
  background: #000000;
  color: #ffffff;
  margin-block-end: 3em;
}

#shadow-1 {box-shadow: 0 calc(.05 * 1em) 0 red;}
#shadow-2 {box-shadow: 0 calc(.25 * 1em) 0 red;}
#shadow-3 {box-shadow: 0 calc(1.5 * 1em) 0 red;}
#shadow-4 {box-shadow: 0 calc(.75 * 5px) 0 red;}
#shadow-5 {box-shadow: 0 calc(2 * 5px) 0 red;}

<div id="shadow-1">5% of 1em</div>
<div id="shadow-2">25% of 1em</div>
<div id="shadow-3">150% of 1em</div>
<div id="shadow-4">75% of 8px</div>
<div id="shadow-5">200% of 8px</div>

在您的情况下，这可能是：

.shadowright
{
    --offset: 5px
    box-shadow: var(--offset) var(--offset) calc(2 * var(--offset)) #454545;             
}

- Mue