关于评分的半颗星，1/3颗星有没有办法通过css样式写出来，有没有人能够提供下思路
发布于 8 年前 作者 FlyerJay 7837 次浏览 来自 分享

star.png

22 回复

很少有半个的吧。不行的话就1个星星拆成2半，哈哈。

@coolicer 有半个，评分要算个平均值有小数的

纯臆猜…这种东西切个png出来做…结合background-position和background-size

http://zavoloklom.github.io/material-design-iconic-font/icons.html

做个长条的5星连在一起的，然后width: 比如说设置成33.33%(具体需要计算下)不可以吗？

@DevinXian 星星就是字体啊，我是想的用文字蒙版，然后改变背景的size来实现

https://ant.design/components/rate-cn/

xiao.png

上面的是我自己实现的css样式

span i.iconfont.icon-star*5 span{ font-size: 0.8rem; background: -webkit-linear-gradient(-180deg, #d9d8d4 10%, #ff853f 10px); -webkit-background-clip: text; -webkit-text-fill-color: transparent; padding: 0 0.1rem; }

@dianjie 就是因为不想用插件才自己做啊

@FlyerJay 这样做，移动设备可用，因为浏览器css兼容性好；pc不合适吧，想想IE就爽

@FlyerJay 可以参考别人的实现啊…… 使用cnode[antd-moblie]版

两层图片叠加，上面为彩色，下面为灰色。要显示多少就控制彩色长度就行了。

字符也可以，同样是两层叠加，比如我这个组件，参考一下： https://vux.li/#/zh-CN/demos/rater

@FlyerJay 你看看那个实现，和插件没关系，通过设置内部元素的定位和颜色改变来控制伪元素 before 实现星星的1/2

@DevinXian 因为只用适配移动设备

@DevinXian 好的

@airyland 好的，你是vux的作者呀

@FlyerJay github工作记录真是满

@DevinXian 瞎搞

@airyland 你这个基本没有兼容性问题，

回到顶部