一、text组件使用
想要的效果
1538017578(1).jpg
1、wxml布局
<view class='home-category-name-contain'>
<text class='home-category-name'>{{category.name}}</text>
</view>
2、wxss样式
.home-category-name-contain {
padding-top: 50rpx;
padding-bottom: 50rpx;
text-align: center;
}
.home-category-name {
color: #005cb7;
font-size: 56rpx;
border-top: 2rpx solid #005cb7;
border-bottom: 2rpx solid #005cb7;
border-image: linear-gradient(to left, #efefef, #005cb7, #efefef);
border-image-slice: 10;
line-height: 120rpx;
height: 120rpx;
width: 200rpx;
text-align: center;
}
3、效果
1538017752(1).jpg
4、问题
1、width的宽度无论设置多宽，边框长度无效
5、解决
.home-category-name {
color: #005cb7;
font-size: 56rpx;
border-top: 2rpx solid #005cb7;
border-bottom: 2rpx solid #005cb7;
border-image: linear-gradient(to left, #efefef, #005cb7, #efefef);
border-image-slice: 10;
line-height: 120rpx;
height: 120rpx;
min-width: 200rpx;
text-align: center;
display: inline-block;
}
6、总结
1、text组件设置宽无效
2、text组件大小可以通过padding值设置
3、 display: inline-block添加此属性，可使text组件设置宽度有效
7、推测
text组件 display: inline
