公告列表
公告列表
收藏
回答

新手小白，请问这条下划线的样式是如何实现的？

样式文件中没有找到相关的设置啊，谢谢！


回答关注问题邀请回答
收藏

4 个回答

  • 土豆
    土豆
    2018-12-25


    /* 1像素边线 */
     
    .line-w-top, .line-w-bottom, .line-h-left, .line-h-right {
        position: relative;
    }
     
    .line-w-top::after, .line-w-bottom::after {
        position: absolute;
        content: "";
        width: 100%;
        height: 2rpx;
        background: #ccc;
        transform-origin: 50% 100%;
        transform: scaleY(0.5);
    }
     
    .line-w-top::after {
        top: 0;
        left: 0;
    }
     
    .line-w-bottom::after {
        bottom: 0;
        left: 0;
    }
     
    .line-h-left::after, .line-h-right::after {
        position: absolute;
        content: "";
        width: 2rpx;
        height: 100%;
        background: #ccc;
        transform-origin: 100% 50%;
        transform: scaleX(0.5);
    }
     
    .line-h-left::after {
        top: 0;
        left: 0;
    }
     
    .line-h-right::after {
        top: 0;
        right: 0;
    }

    用法是直接加class

    <view class='line-w-bottem'></view>

    这种方式的好处在于Android和IOS的显示效果都是一致的，可以解决在Android上无法解析0.5px的问题

    2018-12-25
    有用 1
    回复
  • 2018-12-24

    这个样式

    2018-12-24
    有用
    回复 1
    • PDCA
      PDCA
      2018-12-24

      原来如此，找到了，非常感谢

      2018-12-24
      赞
      回复
  • 微盟
    微盟
    2018-12-24

    1. borderBottom

    2. div ,,,,height:1px

    3. 用:after{ xxxx };

    2018-12-24
    有用
    回复 1
    • PDCA
      PDCA
      2018-12-24

      已经找到了，谢谢

      2018-12-24
      赞
      回复
  • 管凯旋
    管凯旋
    2018-12-24

    代码放出来啊

    2018-12-24
    有用
    回复 1
    • PDCA
      PDCA
      2018-12-24

      当前页面的代码吗？这是官网给的demo

      2018-12-24
      赞
      回复
请 登录 后发表内容
相关文档