今天遇到一个需求，画0.5px的线，查了以下资料，主要以scale方法为主。代码如下： 利用after和before的话好像只能画两条线，如果要画整个边框可以先画两倍长宽的边框在缩小到0.5。需要三条边框的话可以考虑在容器内建立三个容器表示边框线再缩小。 ...

题目：画一条0.5px的线 　　1、采用border-image的方式： 　　　　　　border-image属性指定作为div元素周围边框的图像，border-image：width；图像边界的宽度。 　　2、采用transform: scale()的方式： 　　　　　　2D效果：缩放。 ...

CSS设置1px变粗的原因： 为什么移动端css里面写了1px, 实际看起来比1px粗. 其实原因很好理解:这两个“px”的含义是不一样的. 移动端html的header总会加上一句： 这句话定义了本页面的viewport的宽度为设备宽度,初始缩放值和最大缩放值都为1,并禁止 ...

通过伪类元素:after为其添加样式，用transform：scaleY令其在垂直方向缩小0.5倍 ...

采用transform: scale()的方式，该方法用来定义元素的2D 缩放转换： ...

1px? 0.5px! 前一段时间刚开发完一个项目，但总感觉界面样式怪怪的，虽然表面上看起来和设计稿是一样的，可是就是没设计稿那种感觉，而且莫名还有一种山寨的气息，让我感到很郁闷，找来找去终于发现罪魁祸首——border线宽的问题。 问题产生的原因 关于设备像素的基础知识，建议去看 ...

之前写的时候不太了解人家移动APP是怎么实现的，后来自己摸索 知道了可以使用缩放的方式解决线比较粗的问题。 最近看到了 小月博客里的一篇文章： http://www.aliyue.net/1487.html，因此，自己总结了一下。 ...

在移动端会出现线条太粗的现象，简单来说，是因为手机端的像素单位和ui的图比例是2:1，所以ui图的1px边框对我们来说就是0.5px,但是浏览器渲染的最小单位就是1px,下面给几种方法用css写出0.5px边框1. html部分 <div class="border">测试 ...