一、1像素边框

1像素下边框

.border-1px(@color:red) {

    @media (-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5){

    position: relative;

    &::after {

      -webkit-transform: scaleY(0.7);

      transform: scaleY(0.7);

      width: 100%;

      display: block;

      position: absolute;

      left: 0;

      bottom: 0;

      border-top: 1px solid @color;

      content: '';

    }

  }

    @media (-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5){

      &::after{

        -webkit-transform: scaleY(0.5);

        transform: scaleY(0.5);

      }

    }

}

  .border-none(){

    &:after{

      display: none;

    }

  }

1像素上边框,只需将&::after改为&::before,bottom:0改为top:0就可以了

推荐阅读更多精彩内容

  • <!DOCTYPE html> 3_3HOMEWORK /*! Twitter Bootstrap //! ...
    ooocoo阅读 413评论 0 0
  • 1.背景图渐变.ui-border-t { border-top: 1px solid #e0e0e0 }.ui-...
    RiverSouthMan阅读 48评论 0 0
  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 903评论 0 7
  • 关于css常见问题,大多是移动端的。 简单的排版规则:条目与条目之间空两行,每条内容部分分段空一行。标点符号全部用...
    苏水儿阅读 2,586评论 0 7
  • 我有一双眼睛 可是我什么也看不见 我看不见小孩的笑脸 看不见老人的呜咽 看不见长长短短的刀和剑 看不见江湖的深深浅...
    晓晓博士阅读 11评论 0 0