微信小程序1px线

最新推荐文章于 2022-01-12 15:58:16 发布

原创最新推荐文章于 2022-01-12 15:58:16 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序

微信小程序同时被 2 个专栏收录

19 篇文章

订阅专栏

CSS

13 篇文章

订阅专栏

你是不是也要被UI的1px的分割线难倒过，不要怕，我们来盘他（1px）。闲言碎语不要讲，直接上代码。

效果展示

分割线

wxml

<view class="no-more">
    <span class="no-more--line"/>
    <span class="no-more--txt">没有更多啦</span>
    <span class="no-more--line"/>
</view>

wxss

.no-more {
  margin: 40rpx 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
  .no-more--txt {
    margin: 0 30rpx;
    font-size: 20rpx;
    color: #e6e3e3;
  }
  .no-more--line {
    position: relative;
    width: 80rpx;
  }
    /* 1px边框 */
    .no-more--line:after {
      position: absolute;
      box-sizing: border-box;
      -webkit-transform-origin: center;
      transform-origin: center;
      content: ' ';
      pointer-events: none;
      top: -50%;
      right: -50%;
      bottom: -50%;
      left: -50%;
      border: 0 solid #eee;
      border-width: 1px;
      -webkit-transform: scale(0.5);
      transform: scale(0.5);
    }