一、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;

河马过河微信公众号.jpg