Question

我正尝试在box-shadow文件中为transition和less使用boostrap mixin，如下所示：

.service-box {
  .box-shadow(3px 3px 1px rgba(195, 195, 195, 0.4));
  .transition(0.4s);
}

让我们看一下其编译的css：

.service-box {
  -webkit-box-shadow: 3px 3px 1px rgba(195, 195, 195, 0.4);
  box-shadow: 3px 3px 1px rgba(195, 195, 195, 0.4);
  -webkit-box-shadow: '' 3px 3px 1px rgba(195, 195, 195, 0.4) 1px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: '' 3px 3px 1px rgba(195, 195, 195, 0.4) 1px 2px rgba(0, 0, 0, 0.2);
  -o-box-shadow: '' 3px 3px 1px rgba(195, 195, 195, 0.4) 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: '' 3px 3px 1px rgba(195, 195, 195, 0.4) 1px 2px rgba(0, 0, 0, 0.2);
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

您会看到上述mixin无法正确编译，不是吗？

有人能说出原因吗？谢谢。

Answer 1

这是对我有用的 Bootstrap v5

@include transition(bottom .5s cubic-bezier(0, 1, 0, 1), background-color .25s ease-in);

我如何正确地使用引导混合来进行盒子阴影和过渡？

1 个答案: