关于 LESS 中对“/”的编译处理

[rokeyzki]

众所周知*1

• 在CSS中，如果我们要绘制一个 椭圆，一般代码如下：

#circleZeta {
  width: 100px;
  height: 50px;
  background-color: #47d1eb;
  border-radius: 100px / 50px; // 注意这里的写法
}

• 展示样式如下：

---

众所周知*2

• 在LESS中，如果我们要将其编译为CSS时，LESS会自动根据 +、-、*、/ 等运算符进行尺寸大小的计算

• 于是，如果在LESS中绘制 椭圆，这一行样式：border-radius: 100px / 50px 就会被编译成 border-radius: 2px，造成异常。

• 展示样式如下：

---

那么问题来了，有没有前端大大帮忙指点一下，我该如何避免这种情况呢？

感谢

[shiye515]

用空格分割，不要用斜线

[lujjjh]

border-radius: ~"200px/100px";

或者

border-radius: 50%;

[rokeyzki]

@shiye515 空格分割跟斜线在 CSS 中是两种表述：
border-radius: 100px 50px ，表达的是（左上右下、左下右上）的圆角半径
border-radius: 100px/50px ，表达的是（水平直径、垂直直径）的圆角

[rokeyzki]

@lujjjh 感谢，我在 webpack 中打包编译可以正常输出了