微信小程序 关于边框border的属性以及border边框不显示的问题

微信小程序 关于边框border的属性以及border边框不显示的问题‘

欲做出这样的界面效果：

思路如下：
可以设置一个盒子，盒子的内容是“个人中心”；再加上盒子最底下的边框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；

希望这篇文章对你有帮助， 欢迎一起讨论学习交流！