时间戳

首页 > 解决方案 > 我如何正确使用引导程序混合进行框阴影和过渡？

css - 我如何正确使用引导程序混合进行框阴影和过渡？

问题描述

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

.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 没有正确编译，不是吗？

有人能说出这是什么原因吗？谢谢你。

标签： csstwitter-bootstrap-3lessless-mixins

解决方案

这是对我有用的 Bootstrap v5

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

推荐阅读