新手小白，请问这条下划线的样式是如何实现的？
发布于 5 年前 作者 ksun 9950 次浏览 来自 问答

样式文件中没有找到相关的设置啊，谢谢！

4 回复
/* 1像素边线 */
 
.line-w-top, .line-w-bottom, .line-h-left, .line-h-right {
    position: relative;
}
 
.line-w-top::after, .line-w-bottom::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 2rpx;
    background: #ccc;
    transform-origin: 50% 100%;
    transform: scaleY(0.5);
}
 
.line-w-top::after {
    top: 0;
    left: 0;
}
 
.line-w-bottom::after {
    bottom: 0;
    left: 0;
}
 
.line-h-left::after, .line-h-right::after {
    position: absolute;
    content: "";
    width: 2rpx;
    height: 100%;
    background: #ccc;
    transform-origin: 100% 50%;
    transform: scaleX(0.5);
}
 
.line-h-left::after {
    top: 0;
    left: 0;
}
 
.line-h-right::after {
    top: 0;
    right: 0;
}

用法是直接加class

<view class='line-w-bottem'></view>

这种方式的好处在于Android和IOS的显示效果都是一致的，可以解决在Android上无法解析0.5px的问题

这个样式

  1. borderBottom

  2. div ,,,,height:1px

  3. 用:after{ xxxx };

代码放出来啊

回到顶部