欲做出这样的界面效果： 思路如下： 可以设置一个盒子，盒子的内容是“个人中心”；再加上盒子最底下的边框border-bottom就可以了。 代码如下：
<view class="top-background"> <text class="top-text">个人中心</text> </view> .top-background{ width:100%; height:80rpx; margin-top:10rpx; justify-content: center; align-items: center; border-bottom-color:#BBBBBB; display: flex; flex-direction: column; } .top-text{ color: #2A2A2A; font-size: 35rpx; font-family: Roboto-regular; text-align: center; position: absolute; }效果如下: 没有显示下边框！
原因在于只定义了下边框的颜色color，没有定义其style 若将部分样式改为如下代码，加上style的定义：
/* border-bottom:1px solid #BBBBBB; */ /* border-bottom-width: 1rpx; */ border-bottom-style: solid; border-bottom-color: #BBBBBB;即使没有定义width，也会取默认值medium，**相当于3px，**另外thin为1px，thick为5px。即还是会显示下边框。
若不定义style，则相当于border-bottom-style:none
border-bottom-style: none; border-bottom-color: #BBBBBB;我们可以将border-bottom的三个属性统一写成一句
border-bottom:1rpx solid #BBBBBB;这就满足我们的需求了！ 总结：
若不定义border的style，相当于style属性被设置为none，故不会显示border；不定义border的width，有默认值medium，相当于3px；border属性可以统一写成一句如 border: 5px solid black；希望这篇文章对你有帮助， 欢迎一起讨论学习交流！
