2018-05-17

css3画了一个圆柱，很谨慎的在IE，火狐，谷歌上面测试了，完美，完全兼容，开开心心去开发上线。

上线完了，无意间打开火狐（59.0.2 版本），呵呵哒，不兼容……wtf

赶忙扯出自己的小demo，嗯，没毛病啊，完美兼容

```

.bar{

width: 30px;

height: 50px;

-moz-border-radius: 30px/14px;

-webkit-border-radius: 30px 14px;

border-radius: 30px/14px;

background: #ccc;

}

```

仔细一看，额，项目中使用的时候用了less，里面有一个编译功能，把我的‘算式’计算了……但是在谷歌中

-webkit-border-radius: 30px 14px;这个起了作用，不清楚为什么（正常情况应该是右上右下一个圆角吧？）

我不管，我要解决问题。

1、less有一个避免被编译计算的

border-radius: ~"calc(30px/14px)";

然而，并没什么作用，而且不被浏览器识别……

2、还有没有画椭圆的办法？

border-radius: 50%;

真的可以，但是，仅仅是椭圆就行 ，而我，需要的是圆柱

3、还有什么办法呢……好吧，我也没办法了，所以，终极方案就是写行间样式，避免被less编译

遇到问题不要怕啊，解决一个是一个，虽然问题可能解决不完，但是自己已经越走越远了啊。

干巴爹。