前端技术

移动端一像素方案

2018-12-08  本文已影响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>
上一篇下一篇

猜你喜欢

热点阅读