我有一个关于box-shadow的以下mixin:
@mixin box-shadow($horizontal, $vertical, $blur, $spread, $r, $g, $b, $a, $inset:"") {
-webkit-box-shadow: $horizontal $vertical $blur $spread rgba($r, $g, $b, $a) unquote($inset);
box-shadow: $horizontal $vertical $blur $spread rgba($r, $g, $b, $a) unquote($inset);
}
如果我像这样使用它,它可以正常工作,例如:
@include box-shadow(0px, 2px, 4px, 0px, 0, 0, 0, 0.4)
但是我如何链接2个阴影?
最终我想拥有一个这样的CSS,例如:
-webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.4), 0px 0px 6px 2px rgba(255,255,255,0.5) inset;
我尝试使用以下代码:
@include box-shadow(0px, 2px, 4px, 0px, 0, 0, 0, 0.4), box-shadow(0px, 0px, 6px, 2px, 255, 255, 255, 0.5, inset);
但那并没有奏效。那么,有可能吗?
答案 0 :(得分:1)
一个简单的解决方案是将mixin更改为使用变量参数。 这样的事情。
@mixin box-shadow($params...) {
-webkit-box-shadow: $params;
-moz-box-shadow: $params;
box-shadow: $params;
}
这将允许您在参数中使用逗号。
你会像这样使用mixin:
@include box-shadow(0px 2px 4px 0px rgba(0, 0, 0, 0.4), 0px 0px 6px 2px rgba(255,255,255,0.5)) ;
答案 1 :(得分:-1)
是的,这是可能的。请参阅以下文章以获得更好的解释 http://www.entheosweb.com/tutorials/css/multiple_shadows.asp