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

时间:2018-06-21 05:33:22

标签: css twitter-bootstrap-3 less less-mixins

我正尝试在box-shadow文件中为transitionless使用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无法正确编译,不是吗?

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

1 个答案:

答案 0 :(得分:0)

这是对我有用的 Bootstrap v5

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