css - 使用 Bourbon 在单个元素上的多个框阴影

Question

我想在一个元素上放置两个盒子阴影。以下不起作用：

@include box-shadow(1px 1px 488px 1px rgba(0, 0, 0, 0.12) inset);
@include box-shadow(4px 4px 4px 1px rgba(0, 0, 0, 0.28));

不提供一个逗号分隔的盒子阴影列表到box-shadowmixin 中（它只需要一个参数）。我怎样才能做到这一点？我正在使用 Boubon gem，但直接的 CSS 解决方案也可以。

Answer 1

请参阅链接以了解如何执行此操作

有没有办法在一个元素上使用两个 CSS3 盒子阴影？

它的要点是尝试使用逗号分隔的，我知道你说你已经尝试过了，但可能会仔细检查他们在链接答案中建议的语法？

Answer 2

Bourbon 的box-shadowmixin 已被弃用，因为浏览器前缀的使用已降至阈值以下。只需使用常规的 ol' CSS：

box-shadow: 
    1px 1px 488px 1px rgba(0, 0, 0, 0.12) inset,
    4px 4px 4px 1px rgba(0, 0, 0, 0.28);

旁注：我会注意使用如此巨大的模糊半径；这可能会在较慢的机器上获得相当糟糕的性能。如果您将其用作巨大的背景渐变，最好将该渐变添加为另一个背景linear-gradient图层。