首页 > 其他分享> 文章详细

画一条0.5px 的线

2021-08-09 16:01:51 阅读：266 来源： 互联网

标签：一条缩放 px 0.5 像素 1px ccc

目的：

物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的，这是厂商在出厂时就设置好的，比如苹果6/7/8是750*1334
我们开发的时候1px不是一定等于一个物理像素的
PC端页面，1个px等于一个1个物理像素，但是移动端就不尽相同
一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比

那么我们的问题来了，怎么在高清屏上画一条0.5px的边呢？0.5px相当于高清屏物理像素的1px

方式

1.直接画
2.使用线性渐变
3.缩放
4.阴影
5.修改

对比图：

直接画：

.box1 {
height:1px;
width: 100px;
background-color: #ccc;
}

.box2 {
height: 0.5px;
width: 100px;
background-color: #ccc;
}

<p>直接画的</p>
<p>1px</p>
<div id="" class="box1"></div>
<p>0.5px</p>
<div class="box2"></div>

使用线性渐变linear-gradient

.box4 {
  height: 1px;
  width: 100px;
  background:linear-gradient(0deg,#fff,#ccc);
}

linear-gradient(0deg,#fff,#ccc);
渐变的角度从下往上，从白色渐变到黑色；
而且是线性的，在高清屏上，1px的逻辑像素代表物理设备的到px，由于是线性渐变，所以第一个1px只能是#fff，而剩下的那个像素只能是#ccc,这样就达到了画一半的目的

使用缩放：

.box3 {
  height: 1px;
  width: 100px;
  background-color: #ccc;
  transform: scaleY(0.5);
  transform-origin: 50% 100%
}

当缩放完后，发现，线变虚了

默认缩放是从中点开始的，所以要改变缩放的位置
transform-origin: 50% 100%

使用阴影box-shadow

.box5 {
  height: 1px;
  width: 100px;
  background: none;
  box-shadow: 0px 0.5px 0px #ccc;
 }

标签：一条,缩放,px,0.5,像素,1px,ccc
来源： https://www.cnblogs.com/ff-upday/p/15119063.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9