border：1rpx solid #eee;
一般来说,border的最小宽度为1rpx，在手机上显示确实显得有点粗糙；iOS手机系统支持浮点数,可以使用rpx作为单位，可设置为1rpx，相当于0.5px，而安卓系统就不行了，那么如何解决安卓系统上太粗糙的问题呢？
比较好的一种解决办法是使用伪类：
.menus {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 90rpx;
}
.menus::after {
content: " ";
position: absolute;
top: 0;
right: 0;
height: 1px;
border-top: 1px solid #d9d9d9;
color: #d9d9d9;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.3);
transform: scaleY(0.3);
left: 0;
z-index: 2;
}
伪类效果如下（底部四个按钮上方的边线）：
伪类效果.jpg
border-top效果如下（底部四个按钮上方的边线）：
border-top效果.jpg
网友评论