美文网首页
一、1像素边框

一、1像素边框

作者: 你听cmy1994 | 来源:发表于2018-01-09 10:24 被阅读0次

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就可以了

相关文章

  • CSS盒子模型

    边框:环绕在标签周围的边条 设置边框一:-连写格式:同时设置4条边框{border:边框宽度 边框样式 边框颜色;...

  • 设置边框<->三种方式

    一、边框border的组成: 边框的宽度(粗细) :1px 边框的样式(样子) : 边框的颜色 : 二、复合样式 ...

  • 盒子模式之边框属性

    一、边框属性 什么是边框? 边框就是环绕在标签宽度和高度周围的线条。 边框属性的格式 连写. 同时设置四条边的边框...

  • 25.边框圆角渐变

    边框 什么是边框圆角?将直角的边框变为圆角的边框 边框圆角的格式?border-radius: 左上 右上 右下 ...

  • 07-CSS盒模型

    边框属性 边框属性的格式连写(同时设置四条边的边框)border: 边框的宽度 边框的样式 边框的颜色;快捷键:b...

  • 前端培训机构—css源码笔记(三)

    一、边框拓展 设置边框圆角 border-radius 边框折叠 border-collapse: collaps...

  • 边框border

    边框的组成:边框的粗细,边框的样式,边框的颜色 border: 1px solid red 边框的粗细:单位为px...

  • SwiftUI 设置边框、透明度、阴影

    前言 1、设置边框 1.1 设置边框颜色 默认为1的边框 解释 1.2 设置边框颜色、宽度 设置边框颜色、宽度 2...

  • 2.css盒模型

    1 盒子模型的概念 2.边框属性 3.边框属性—设置边框样式(border-style) 4.边框属性—设置边框样...

  • CSS边框圆角--跟着李南江学编程

    1.什么是边框圆角? 就是把矩形边框变成圆角边框,就叫做边框圆角。 2.设置边框圆角的格式 2.1 border-...

网友评论

      本文标题:一、1像素边框

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