1、使用transform: scaleY(0.5);
2、使用linear-gradient(0,red,#ffffff 100% );
3、使用box-shadow: 0 0.5px 0 red;（代码量最少，推荐）
效果
image.png
<body>
<view class="border-line-box">
<view class="border-line1"></view>
<view class="border-line2-box">
<view class="border-line2"></view>
</view>
<view class="border-line3"></view>
<view class="border-line4"></view>
<view class="border-line5"></view>
</view>
</body>
<style lang="scss">
.border-line-box {
padding: 20rpx;
width: 100%;
view {
margin-bottom: 10rpx;
}
.border-line1 { // 正常的1px
border-bottom: 1px solid red;
}
// 使用transform: scaleY(0.5);
.border-line2-box {
width: 100%;
height: 1px;
.border-line2 {
width: 100%;
height: 200%;
border-bottom: 1px solid red;
transform: scaleY(0.5); // 不推荐，必须先放大后缩小，所以需要套一层height: 1px;的盒子
}
}
// 使用linear-gradient(0,red,#ffffff 100% );
.border-line3 {
width: 100%;
height: 1px;
background: linear-gradient(0,red,#ffffff 100% ); // 不推荐，必须写一个单独的height: 1px;容器
}
// 使用box-shadow: 0 0.5px 0 red;
.border-line4 {
width: 100%;
height: 1px;
box-shadow: 0 0.5px 0 red; // 推荐，不需要创建额外的元素
}
}
</style>
