解决方法1:

//border
@mixin border($pos, $color) {
content: "";
position: absolute;
transform-origin: 0 0;
-webkit-transform-origin: 0 0;
@if $pos=='top'{
#{$pos}: 0px;
left: 0px;
right: 0px;
border-#{$pos}: 1px solid $color;
transform: scaleY(.5);
-webkit-transform: scaleY(.5);
} @else if $pos=='bottom' {
#{$pos}: 0px;
left: 0px;
right: 0px;
border-#{$pos}: 1px solid $color;
transform: scaleY(.5);
-webkit-transform: scaleY(.5);
} @else {
top: 0px;
bottom: 0px;
#{$pos}: 0px;
border-#{$pos}: 1px solid $color;
transform: scaleX(.5);
-webkit-transform: scaleX(.5);
}
}

使用方式:

.div {
position:relative; &:after {
@include border("bottom", #d9d9d9)
left: pxToRem(30px); /* 美化,不喜欢可以不加 */
}
}

解决方式2:

.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.border { border: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
.border { border: 0.333333px solid #999 }
}

css 温故而知新 1px的问题的更多相关文章

  1. css实现1px 像素线条_解决移动端1px线条的显示方式

    使用CSS 绘制出 1px 的边框,在移动端上渲染的效果会出现不同,部分手机发现1px 线条变胖了,这篇文章整理2种方式实现1px 像素线条. 1.利用box-shadow + transform & ...

  2. css 温故而知新 slideDown/slideUp 新思路

    默认设置高度为0; -webkit-transition:.3s all ease;transition:.3s all ease;opacity:0;height:0; 需要时添加高度即可 heig ...

  3. css 温故而知新 字体方向 将文字竖着显示

    writing-mode: vertical-rl;

  4. CSS 温故而知新

    如何让文字垂直居中 需要设置div的height,line-height 为一样的值,如下所示: <div class="ui-bar ui-bar-e" style=&qu ...

  5. CSS 温故而知新 background常用属性

    1.background-repeat 不用说,常用直接no-repeat 2.background-size 常用的分为两个,一个是铺满:cover, 另一个是使图像适应宽高:contain 3.b ...

  6. CSS 温故而知新 断句失败

    设置了一定的宽度和高度.但无论是下面哪句都无效. word-break: break-word; word-wrap: break-word; 原因竟然是因为 /* white-space: nowr ...

  7. css 温故而知新 select-option 文字方向居右

    对select-option使用text-align:right;是无效的. 正确的姿势是:direction: ltr; 另外值得一提的是,通常还需要配合一点padding来美化.

  8. css中的1px并不总等于设备的1px(高分辨率不等 低分辨等)

    在css中我们一般使用px作为单位,在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素,这可能会造成我们的一个错觉,那就是css中的像素就是设备的物理像素.但实际情况却并非如此,css ...

  9. Retina屏实现1px边框

    问题描述 通常我们实现边框的方法都是设置1px的边框,但是在retina屏上因为设备像素比的不同,边框在移动设备上的表现也不相同,例如在devicePixelRatio = 2的retina屏下会显示 ...

随机推荐

  1. [BZOJ1044][HAOI2008]木棍分割 二分+贪心+dp+前缀和优化

    1044: [HAOI2008]木棍分割 Time Limit: 10 Sec  Memory Limit: 162 MB Submit: 4112  Solved: 1577 [Submit][St ...

  2. Java IO 学习(五)跟踪三个文件IO方法的调用链

    假设我们想要用Java读取一个二进制文件,有好几种方式,本文会选取其中比较典型的三种方式进行详细分析 0. 准备工作 安装openjdk-1.8.0.141(普通的jdk中涉及IO的很多代码是闭源的, ...

  3. (10)C#静态方法,静态字段,静态类,匿名类

    6.静态方法 使用静态方法就可不必用类的实例化调用次函数 class Test { public static void method() { ........ } //当调用一个method()时就 ...

  4. 洛谷—— P1680 奇怪的分组

    https://www.luogu.org/problemnew/show/1680 题目背景 终于解出了dm同学的难题,dm同学同意帮v神联络.可dm同学有个习惯,就是联络同学的时候喜欢分组联络,而 ...

  5. extjs grid合并单元格

    http://blog.csdn.net/kunoy/article/details/7829395 /** * Kunoy * 合并单元格 * @param {} grid 要合并单元格的grid对 ...

  6. MySQL索引,MySQL性能分析及explain的使用,分析SQL查询性能

    可以使用explain来分析MySQL查询性能,举例如下: 1.使用explain语句去查看分析结果 如 explain select * from test1 where id=1; 会出现: id ...

  7. SimpleDateFormat关于时间类的一些常用处理

    项目中经常会出现对时间类的一些处理,记录一下: 实例一:/** * 获取当前时间是星期几? * * @param args */ public static void main(String[] ar ...

  8. ansible的inventory文件含义

    默认文件为/etc/ansible/hosts 例如 [test] web.yinzhipeng.com dhcp ansible_ssh_host=172.16.18.195 1.中括号中的名字代表 ...

  9. 设计模式之中介者模式(php实现)

    github地址:https://github.com/ZQCard/design_pattern /** * 中介者模式(Mediator Pattern)是用来降低多个对象和类之间的通信复杂性. ...

  10. pure-ftp 服务配置篇

    FTP 是File Transfer Protocol(文件传输协议)的英文简称,而中文简称为 "文传协议" 用于Internet上的控制文件的双向传输. FTP的主要作用,就是让 ...