使用波旁威士忌在单个元素上的多个框阴影

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-shadow mixin中提供以逗号分隔的框阴影列表（它只需要一个参数）。我怎么能做到这一点？我正在使用Boubon宝石，但直接的CSS解决方案也很好。

Answer 1

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

Is there a way to use two CSS3 box shadows on one element?

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

Answer 2

Bourbon's box-shadow mixin has been deprecated因为前缀浏览器的用法已降至阈值以下。只需使用常规的'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图层。