最大框阴影数适用于元素

Question

我想知道HTML Element可能有多个盒子阴影。现在我想探索一下我们可以为元素提供的最大可能盒子阴影数量。请帮助我。

Answer 1

您可以添加任意数量的内容。但请记住，使用多个阴影会增加CPU使用率并降低站点/应用程序的性能。另外，为什么你会使用多个？

要向一个元素添加多个box-shadows，您需要将,（逗号）与box-shadow值分开

见下文

div {
  width: 100px;
  height: 100px;
  box-shadow: 5px 10px 5px 5px #FF1F1F, 15px 0 5px 5px #1100FF, -10px 0 5px 5px #B2FFA6, -10px 30px 5px 10px #000000;
}

<div>

</div>

Answer 2

这完全取决于您的机器：

代码越多（js / styles / etc ..） - 浏览器将消耗的资源越多（RAM，CPU，GPU）。

从所有其他消费应用程序（包括操作系统）中提取上述内容，您将得到一个非常（非常）模糊的估计