前端页面设计0.5px的线

首先，我们先来了解几个概念。

物理像素(physical pixel)

---

一个物理像素是显示器（手机屏幕）上最小的物理显示单元（像素颗粒），在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。 如：iPhone6上就有750*1334个物理像素颗粒。

物理像素表示每个显示设备的最小的显示像素。

设备独立像素(density-independent pixel)

---

设备独立像素（也叫密度无关像素），可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素（比如：css像素），有时我们也说成是逻辑像素。然后由相关系统转换为物理像素。所以说，物理像素和设备独立像素之间存在着一定的对应关系，这就是接下来要说的设备像素比。

独立设备像素就是我们计算机内的一个像素单位，可以用它来转换成相应的物理像素。

设备像素比(device pixel ratio )简称dpr

---

设备像素比（简称dpr）定义了物理像素和设备独立像素的对应关系。它的值可以按如下的公式的得到：

设备像素比(dpr)=物理像素/逻辑像素(px)

如果要体验这个视觉变化可以用谷歌浏览器调成手机模式，观感一下。

怎么设计成0.5px的线

• 1、使用 transform 的 scale 把线条高度缩小一半，新边框就相当于0.5px了。

 效果图如下：

• 2、使用backgroud-img里面的线性渐变函数进行操作(linear-gradient)

首先对这个属性进行介绍：

background-image: linear-gradient（渐变颜色）

里面添加颜色，默认是平均分配

如我们随便设置几个颜色。

.div1{            
    margin: 200px 0 0 200px;
    width: 200px;
    height: 200px;
    background-image: linear-gradient(red, yellow, blue, green);
}

 几个颜色是均分进行渐变的。

对于渐变的方向也是可以改变的，默认是从上到下.

background-image: linear-gradient(to right, red, yellow, blue, green);

 background-image: linear-gradient(to top, red, yellow, blue, green);

background-image: linear-gradient(to left, red, yellow, blue, green);

 background-image: linear-gradient(to bottom, red, yellow, blue, green);

从左到右的渐变 ：从下向上的；从右向左的；从上向下的；

 

 

/*0deg = to top -- 从下到上*/
background-image: linear-gradient(0deg, red, yellow, blue, green);
/*基于0度顺时针旋转45deg*/
background-image: linear-gradient(45deg, red, yellow, blue, green);
/*基于0度逆时针旋转45deg*/
background-image: linear-gradient(-45deg, red, yellow, blue, green); 

 第一个参数可以写一个角度，0deg表示在自下向上的方向，45deg表示在此基础上进行顺时针旋转，

下面是浏览器效果。

 

/*设置过渡颜色的起始位置*/
/*从过渡起始位置50px开始让红色和黄色之间产生颜色渐变效果*/
background-image: linear-gradient(to right, red 50px, yellow, blue, green);
background-image: linear-gradient(to right, red 50px, yellow 50px, blue, green);
background-image: linear-gradient(to right, red 50px, yellow 50px, yellow 100px, blue, green);
 

 表示为在多么大的距离开始渐变。

 因此，我们可以通过设置盒子的高度为1px,然后进行线性渐变都是50%，一个颜色设置成隐形色。

代码如下：

.div3 {
      height: 1px;
      margin-top: 20px;
      background-image: linear-gradient(0deg, #f00 50%, transparent 50%);
      }

• 3、使用meta中的scale设置成0.5即可

这种方法不推荐，因为会影响整个页面的设计。