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

物理像素(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即可

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

前端页面设计0.5px的线相关推荐

Web前端页面设计流程及注意事项，谨记！
每天我们打开电脑,看到各种各样的web前端页面.你知道他们是如何制作的吗?为了让页面更具有规范性,让使用者更加方便,在制作页面过程中必须遵循一定的设计流程.在这里就为大家详细介绍一下制作一个Web前端 ...
因分辨率变化html页面布局跳动_Web前端页面设计流程及注意事项，谨记！
每天我们打开电脑,看到各种各样的web前端页面.你知道他们是如何制作的吗?为了让页面更具有规范性,让使用者更加方便,在制作页面过程中必须遵循一定的设计流程.在这里就为大家详细介绍一下制作一个Web前端 ...
画一条0.5px的线
1.直接设置0.5px,在不同的浏览器会有差异( 不同系统的不同浏览器对小数点的px有不同的处理) //画一条0.5px的线 <!DOCType html> <html> &l ...
CSS实现0.5px的线 0.5rpxborder边框
1.0.5px的线核心代码就是通过transfrom的scaleY属性,溢出隐藏掉就可以了 // html <div class="line"></div> ...
画出0.5px的线，css
1,box-shadow box-shadow允许小数点,该属性可设置的值包括阴影的X轴偏移量.Y轴偏移量.模糊半径.扩散半径和颜色,所以我们可以设置他的扩散半径来实现0.5px的线 2, tran ...
实现一个博客系统(前端页面设计)
博客系统的四个页面展示效果: 注意CSS有一些隐式规定,下面代码的状态:上下边距不是50px(不是两者边距之和,而是他们的最大值);上下边距塌方问题,况且只在垂直方向有,水平方向就是他们的和:况且他的 ...
0.5px的线如何实现
问题 . hr.half-px {height: 0.5px; } 不同设备,不同浏览器差异较大解决 .hr.scale-half {height: 1px; transform: scaleY(0 ...
新闻发布系统界面 html源码,新闻发布系统的前端页面设计
[实例简介] 这个一个简单的新闻发布系统的前端页面,基本上功能都有. [实例截图] [核心代码] kindeditor └── kindeditor ├── jsp │ ├── demo.jsp ...
前端面试题：如何画一条0.5px的线
前言理论上1px已经是最小单位了,那如何画一条0.5px的线呢? 有以下两种方法解决方法采用meta viewport的方式 <meta name="viewport" ...

前端页面设计0.5px的线

物理像素(physical pixel)

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

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

怎么设计成0.5px的线

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

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

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

前端页面设计0.5px的线相关推荐

最新文章

热门文章