微信小程序 —— 自定义长圆形view

很多情况下遇到的圆形都是用“border-radius: 50%;”做的，但是遇到 这种效果的呢？换成以前的我，果断ps一张图片做背景，可这个始终不是解决办法。

通过“ border-radius: 0.8em; ” 可以解决这个问题。

em:
1em 等于当前的字体尺寸。
2em 等于当前字体尺寸的两倍。
例如，如果某元素以 12pt 显示，那么 2em 是24pt。
在 CSS 中，em 是非常有用的单位，因为它可以自动适应用户所使用的字体。

/*这里border-radius的值是自己定的，但是要根据高来定（一般是高的1/2）*/
.free-cell{
  min-width:2em;
  height:1.7em;
  color:#fff;
  line-height: 1.7em;
  border-radius: 1em;
  background:red;
}