![[捂脸]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_28.8981538.png)
获得徽章 9
- 外国前端开发者说的 Intrinsic Ratios in css 是什么意思?评论3
- #这神转折真掘了# 关于我昨晚发现掘金Bug导致开发小哥半夜被加急那件事
![[捂脸]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_28.8981538.png)
511 ![[疑问]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_31.606e7a5.png)
产品希望实现个0.5px高度的分割线。怎么办？![[流泪]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_6.dde0d83.png)
height属性设置为0.5px？不可以，因为一些浏览器不支持height为小数。![[呲牙]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_2.cd1e2bd.png)
建议设置height=1px，然后设置transform:scaleY(0.5)![[流汗]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_26.1117a72.png)
但是这样还不够，因为虽然设置了transform，但是它依然占据了1px的空间。这样的话，其后的元素看起来就跟分割线有个0.25px的距离，其前的元素看起来跟分割线也有0.25px的距离(因为transform默认的缩放点是在中心)。![[愉快]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_21.c408154.png)
所以还需要把分割线设置成absolute。但这样位置不太好控制位置。所以分割线可以放到伪元素的样式里，在::after里实现样式 展开13
juejin.cn![[疑问]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_31.606e7a5.png)
产品希望实现个0.5px高度的分割线。怎么办？![[流泪]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_6.dde0d83.png)
height属性设置为0.5px？不可以，因为一些浏览器不支持height为小数。![[呲牙]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_2.cd1e2bd.png)
建议设置height=1px，然后设置transform:scaleY(0.5)![[流汗]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_26.1117a72.png)
但是这样还不够，因为虽然设置了transform，但是它依然占据了1px的空间。这样的话，其后的元素看起来就跟分割线有个0.25px的距离，其前的元素看起来跟分割线也有0.25px的距离(因为transform默认的缩放点是在中心)。![[愉快]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_21.c408154.png)
所以还需要把分割线设置成absolute。但这样位置不太好控制位置。所以分割线可以放到伪元素的样式里，在::after里实现样式个人成就