美文网首页
css实现物理像素1px

css实现物理像素1px

作者: 卢哎呦 | 来源:发表于2017-01-20 09:55 被阅读165次
    //利用背景图来画一个
    //左竖线
    .thin-line{
        background: -webkit-linear-gradient(left, transparent 50%, #e5e5e5 50%) no-repeat top left;
        background-size: 1px 100%;
    }
    //下横线
    .thin-line{
        background: -webkit-linear-gradient(bottom, transparent 50%, #e5e5e5 50%) no-repeat bottom left;
        background-size: 100% 1px;
    }
    
    //利用::after伪类元素来给一个绝对定位
    div::after{
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        background: -webkit-linear-gradient(top, transparent 50%, #f2f2f2 50%) no-repeat bottom left;
        background-size: 100% 1px;
        width: 100%;
        height: 1px;
    }
    

    相关文章

      网友评论

          本文标题:css实现物理像素1px

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