WXOPEN Club

新手小白，请问这条下划线的样式是如何实现的？

发布于 7 年前作者 ksun10127 次浏览最后编辑 7 年前来自 ask

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

4 回复
wanli
wanli1 楼6 年前
/* 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的问题

junyu
junyu2 楼6 年前

这个样式

zhangxiulan
zhangxiulan3 楼6 年前

  1. borderBottom

  2. div ,,,,height:1px

  3. 用:after{ xxxx };

wma
wma4 楼5 年前

代码放出来啊