首页 > 文章 > 移动端1px(PC端0.5px)

移动端1px(PC端0.5px)

html

<ul class="border-1px">
      <li>list-item1</li>
      <div class="line"></div>
      <li>list-item3</li>
      <div class="line"></div>
      <li>list-item5</li>
</ul>

底部线条 line

.line{
    position: relative;
    z-index: 10;
    margin: 0 0.05rem;
}
.line:after{
    content: "";
    display: block;
    position: absolute;
    left: -50%;
    width: 200%;
    height: 0.01rem;
    background: #EFEFEF;
    transform:scale(0.5);
}

四面边框 border-1px

.border-1px{
    position: relative;
    margin: 0 0.2rem;
}
.border-1px:after{
    content: "";
    pointer-events: none;  /* 防止点击,降低层级 */
    box-sizing: border-box;
    position: absolute;
    width: 200%;
    height: 200%;
    left: 0;
    top: 0;
    border: 0.01rem solid #E8E8E8;
    transform-origin: 0 0;
    transform: scale(0.5);
}

 

标签:html
时间:2018-11-27 17:01:53阅读(559)
联系我们 - 留言反馈
© 2017 版权所有 鲁ICP备17052893号