一像素边框实现

VisonYH

于 2017-12-21 19:53:08 发布

阅读量340

点赞数

CC 4.0 BY-SA版权

分类专栏： JS修炼之路文章标签： js 前端

本文链接：https://blog.youkuaiyun.com/yihui1314/article/details/78867136

JS修炼之路专栏收录该内容

35 篇文章

订阅专栏

直接上代码（stylus代码）
1. 边框实现

border-1px($color)
    position: relative
    &:after
        display: block
        position: absolute
        left: 0
        bottom: 0
        width: 100%
        border-bottom: 1px solid $color
        content: ' '

2.边框依据不同设备缩放

@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
    .border-1px
        &::after
            -webkit-transform: scaleY(0.7)
            transform: scaleY(0.7)
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
    .border-1px
        &::after
            -webkit-transform: scaleY(0.5)
            transform: scaleY(0.5)

3.使用案例

<div class="tab-head border-1px"></div>

.tab-head
    width 100%
    height 40px
    line-height 40px
    border-1px(rgba(7,17,27,0.1))