解决less中calc无法正确计算的方法

最新推荐文章于 2026-03-24 12:53:55 发布

原创最新推荐文章于 2026-03-24 12:53:55 发布 · 1.2k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vuejs学习之路专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个使用CSS定位及计算属性的具体示例。通过在样式表中使用绝对定位和计算属性，可以实现一个居中的面包屑导航，并且带有自适应位置的下拉箭头。该示例展示了如何利用CSS的特性来实现灵活且美观的设计。

在表达式前加上“~”字符即可正确解析

实例：

.breadcrumb-title{
      text-align: center;
      font-size: @fontC;
      &:after{
        position: absolute;
        content: '';

        top:39px;
        left: calc( ~"50% - 12px");
        border-top:9px solid @colorB;
        border-left:12px solid transparent;
        border-right:12px solid transparent;

      }
    }