美文网首页
1像素问题

1像素问题

作者: 李欢li | 来源:发表于2018-07-04 18:02 被阅读0次

    1 底部或顶部1像素

    <div class="onebtn" id="1"  ></div>
    
    .onebtn{
      width: 100%;
      height: 44px;
      overflow: hidden;
      font-size: 17px;
      color: #E6454A;
      padding-top: 14px;
      position: relative;
    }
    .onebtn:before{
      position: absolute;
      left: 0;
      top: 0;
      content: "";
      transform-origin: 0 1px;
      transform: scaleY(.5);
      width: 100%;
      border-bottom: 1px solid #e8ebf0;
    }
    

    左/右1像素

    <div id="1" class="btnleft" ></div>
    .btnleft{
      width: 134px;
      font-size: 17px;
      color: #E7454A;
      padding-top: 14px;
      padding-bottom: 14px;
      position: relative;
    }
    .btnleft:before{
      content: '';
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      width: 1px;
      height: 200%;
      background-color: #e8ebf0;
       transform:scale(0.5);
       transform-origin:top right;
    }
    

    相关文章

      网友评论

          本文标题:1像素问题

          本文链接:https://www.haomeiwen.com/subject/jnkyuftx.html