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

来源:互联网 发布:淘宝金牌店铺联盟 编辑:程序博客网 时间:2024/05/29 18:12

很多情况下遇到的圆形都是用“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;}
原创粉丝点击