Fatal编程技术网
  • css/
  • 如何在较少的CSS中创建多个框阴影值 读这个

如何在较少的CSS中创建多个框阴影值 读这个

css less

如何在较少的CSS中创建多个框阴影值 读这个,css,less,Css,Less,有几个“正确”的答案。由于这个问题的访问量很大，我想随着项目成熟度的降低，我应该跟上（我认为）最好的答案（基于较少的文档），并相应地更改我接受的答案 我使用的较少，而且我还无法找到允许多个CSS3盒阴影的修复方法。我有以下几点： .box-shadow(@arguments) { -webkit-box-shadow: @arguments; -moz-box-shadow: @arguments; box-shadow: @arguments; } 我正在尝试这样做

有几个“正确”的答案。由于这个问题的访问量很大，我想随着项目成熟度的降低，我应该跟上（我认为）最好的答案（基于较少的文档），并相应地更改我接受的答案

我使用的较少，而且我还无法找到允许多个CSS3盒阴影的修复方法。我有以下几点：

.box-shadow(@arguments) {
    -webkit-box-shadow: @arguments;
    -moz-box-shadow: @arguments;
    box-shadow: @arguments;
}
我正在尝试这样做：

.box-shadow(
    inset 0 0 50px rgba(0,0,0,0.3),
    0 0 10px rgba(0,0,0,0.5);
);
这在正常的CSS3中工作，但在从较少的文件运行时失败。我在某个地方读到，分隔两个阴影的逗号是导致LESS解析器出现问题的原因

有人知道怎么做吗？我能想到的唯一解决办法是创建一个额外的CSS文件，其中包含我的多框阴影属性。

它应该可以正常工作。我以前用过。尝试此混音：

.box-shadow (@shadow1, @shadow2: transparent 0 0 0 ) {
    -moz-box-shadow: @shadow1, @shadow2;
    -webkit-box-shadow: @shadow1, @shadow2;
    box-shadow: @shadow1, @shadow2;
}
然后：

.box-shadow(inset 0 0 50px rgba(0,0,0,0.3), 0 0 10px rgba(0,0,0,0.5));
这适用于较新的版本：

.box-shadow(2px 2px 3px rgba(0,0,0,.4), 0px 0px 5px rgba(0,0,0,.8););
                                  // this semicolon is important! ^

.box-shadow(~"2px 2px 3px rgba(0,0,0,.4), 0px 0px 5px rgba(0,0,0,.8)");
而这个更丑陋的版本甚至适用于较旧的版本：

.box-shadow(2px 2px 3px rgba(0,0,0,.4), 0px 0px 5px rgba(0,0,0,.8););
                                  // this semicolon is important! ^

.box-shadow(~"2px 2px 3px rgba(0,0,0,.4), 0px 0px 5px rgba(0,0,0,.8)");
更新：
进化程度较低，因此此答案已更新，现在再次正确。谢谢MichałRybak

LESS去掉了逗号。因此，
@参数
值变为：

inset 0 0 50px rgba(0,0,0,0.3) 0 0 10px rgba(0,0,0,0.5);
作为长方体阴影无效

相反，当需要逗号时，请执行以下操作：

@temp: inset 0 0 50px rgba(0,0,0,0.3), 0 0 10px rgba(0,0,0,0.5);

.box-shadow(@temp);
最好的解决方案是为每个数量的阴影创建单独的重载。Less处理正确的过载分辨率：

.box-shadow(@shadow1) {
    -webkit-box-shadow: @shadow1;
    -moz-box-shadow: @shadow1;
    box-shadow: @shadow1;
}

.box-shadow(@shadow1, @shadow2) {
    -webkit-box-shadow: @shadow1, @shadow2;
    -moz-box-shadow: @shadow1, @shadow2;
    box-shadow: @shadow1, @shadow2;
}    

.box-shadow(@shadow1, @shadow2, @shadow3) {
    -webkit-box-shadow: @shadow1, @shadow2, @shadow3;
    -moz-box-shadow: @shadow1, @shadow2, @shadow3;
    box-shadow: @shadow1, @shadow2, @shadow3;
}

.box-shadow(@shadow1, @shadow2, @shadow3, @shadow4) {
    -webkit-box-shadow: @shadow1, @shadow2, @shadow3, @shadow4;
    -moz-box-shadow: @shadow1, @shadow2, @shadow3, @shadow4;
    box-shadow: @shadow1, @shadow2, @shadow3, @shadow4;
}

.box-shadow(@shadow1, @shadow2, @shadow3, @shadow4, @shadow5) {
    -webkit-box-shadow: @shadow1, @shadow2, @shadow3, @shadow4, @shadow5;
    -moz-box-shadow: @shadow1, @shadow2, @shadow3, @shadow4, @shadow5;
    box-shadow: @shadow1, @shadow2, @shadow3, @shadow4, @shadow5;
}
编辑：

好的，我仍在学习较少的内容，但在某些情况下，它实际上会混合所有的重载，而不是使用最适用的参数列表，因此您可能会得到不同的结果。后来我修改了mixin，将它们命名为box-shadow-2或box-shadow-3，以匹配预期数量的参数。一旦我弄清楚发生了什么事/有了更好的解决方案，我会修改我的答案。

这个问题有点过时了，因为现在你的解决方案确实有效。

然而，我将尝试解释原因，因为许多人似乎不知道这一点：

实际上，将逗号分隔的参数列表传递给mixin非常简单：在mixin调用中使用分号（
；
）而不是逗号

发件人：

参数可以是分号或逗号分隔的。建议使用分号。符号逗号具有双重含义：它可以解释为mixin参数分隔符或css列表分隔符。使用逗号作为mixin分隔符使逗号分隔列表无法用作参数

分号没有这样的限制。如果编译器在mixin调用或声明中看到至少一个分号，它将假定参数由分号分隔。所有逗号都属于css列表

Mixin定义使用众所周知的常规语法：

.box-shadow(@params) {
  -webkit-box-shadow: @params;
  -moz-box-shadow: @params;
  box-shadow: @params;
}
但是mixincall应该使用分号来分隔参数。如果使用分号，逗号将不再被视为分隔符，并毫无问题地传递给mixin：

.box-shadow(
  inset 0 0 50px rgba(0,0,0,0.3), 0 0 10px rgba(0,0,0,0.5);
);
请注意，如果（如上例）只传递了一个列表，那么也必须在末尾使用分号

查看多个参数的mixin调用的外观，其中一些参数是逗号分隔的列表。

这里是另一个解决方案（我更喜欢）：

使用
e（）
string函数。例如：
e（“S1，S2”）
将返回不带引号的
S1，S2

长示例：

定义：

用法：

输出：

参考资料：

我使用了类似的方法，但只传入了一个参数（整个框的阴影值）。因为参数有一个逗号，我猜它假设我传入了两个参数。我没想过。谢谢。这只是两个。。。有趣的是添加了无限量的方块阴影。最终，这并不是那么有帮助。这是更灵活的，是的，但仍然需要大量处理RGBA值，而正确使用mixin可以更轻松地完成这项工作。我仍然同意这是目前的正确答案。但我如何添加一个变暗功能，例如，而不是rgba颜色？对于更新的版本，请检查我的答案。我已经测试了功能，它工作得很好。。。是的，但这是不必要的，与解决方案相比，这是一种不正确的方法。框阴影（~“inset 0 0 50px rgba（0,0,0,0.3），0 0 0 10px rgba（0,0,0,0.5）”）；“从编程角度来看，原因很多。@Neo——不一定。在字符串中删除长代码区域基本上会杀死IDE/编辑器提供的所有服务，这比任何缺点都糟糕。任何重复的代码都将被智能CSS缩微器删除。@neo-除非我弄错了，否则你的建议无法一步完成这样的任务<代码>.box阴影（0.10px变暗（@red，20%），0.10px变亮（@green，20%））。但我选择的答案可以。如果我忽略了什么，请告诉我。不确定这是这个问题的答案，但这是我问题的答案！！：-）现在，您的解决方案
.box shadow（插入0.050px rgba（0,0,0,0.3），0.010 px rgba（0,0,0,0.5）
可以根据需要工作（使用less2css.org进行测试）。有关完整的解释，请参阅我的答案。我的旧答案也进行了更新，以进一步帮助避免混淆。答案有另一种方法（选项3）可以使用最新的Less功能实现这一点，并提供了更大的灵活性。如果你愿意的话，我会为方块阴影定制答案并在这里发布。不，这不是最新版本的推荐解决方案。建议的方法在问题本身和@MichałRybak答案中给出。@seven phases max，如果我使用分号，它对我不起作用。我不知道为什么，“只是对我不起作用”几乎不能作为一个借口来推荐这个过时的黑客作为“简单而强大的黑客” 
.box-shadow( e("inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(255,255,255,.2)") );

-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(255,255,255,.2);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(255,255,255,.2);
box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(255,255,255,.2);