美文网首页前端技术
移动端一像素方案

移动端一像素方案

作者: 前端来入坑 | 来源:发表于2018-12-08 11:45 被阅读2次

    以vue中使用stylus为例

    mixin.stylus

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

    同样的,在需要写1像素边框的地方引入这段代码,使用的时候直接用border-1px(yourColor)就可以了,
    不需要的时候用border-none()就可以了。

    <style lang="stylus" rel="stylesheet/stylus">
      @import '../../common/stylus/mixin.styl';
      .text
        border-1px(rgba(7, 17, 27, 0.1))
      .text
        border-none()
    </style>
    

    相关文章

      网友评论

        本文标题:移动端一像素方案

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