美文网首页
css 1px方法

css 1px方法

作者: 如果俞天阳会飞 | 来源:发表于2019-11-08 20:19 被阅读0次
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Title</title>
    <style>
        [class*=v-hairline] {
            position: relative;
        }
        [class*=v-hairline]::after {
            content: ' ';
            position: absolute;
            pointer-events: none;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            top: -50%;
            left: -50%;
            right: -50%;
            bottom: -50%;
            -webkit-transform: scale(.5);
            transform: scale(.5);
            border: 0 solid #ebedf0
        }
        .v-hairline--top::after {
            border-top-width: 1px;/*no*/
        }
        .v-hairline--right::after {
            border-right-width: 1px;/*no*/
        }
        .v-hairline--bottom::after {
            border-bottom-width: 1px;/*no*/
        }
        .v-hairline--left::after {
            border-left-width: 1px;/*no*/
        }
        .v-hairline--surround::after {
            border-width: 1px;/*no*/
        }
    
    </style>
    </head>
    <body>
    <div style="width: 200px;height: 20px" class=" v-hairline--surround"></div>
    </body>
    </html>
    

    其他

    $bg-image($url)
      background-image: url($url + "@2x.png")
      @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
        background-image: url($url + "@3x.png")
    @media (-webkit-max-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
      .border-1px
        &::after
          -webkit-transform: scaleY(.5);
          transform: scaleY(.5);
    @media (-webkit-max-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
      .border-1px
        &::after
          -webkit-transform: scaleY(.333333);
          transform: scaleY(.333333);
    border-1px($color)
      position relative
      &:after
        display block
        position absolute
        left 0
        bottom 0
        width 100%
        border-bottom 1px solid $color
        content ''
    

    相关文章

      网友评论

          本文标题:css 1px方法

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