收藏
回答

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

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


最后一次编辑于  2018-12-24  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

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
      回复