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

移动端一像素方案

作者: 前端来入坑 | 来源:发表于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