解决移动端1px边框问题的几种方法(5种)_tableborder=1感觉边框很粗 - CSDN文库

76 浏览量更新于2023-05-03 收藏 66KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

解决移动端解决移动端1px边框问题的几种方法边框问题的几种方法(5种种)

本文介绍了解决移动端1px边框问题的5种方法。当然了，在这之前先整理了与这些方法相关的知识：物理像素、设备独立像

素、设备像素比和viewport。

物理像素、设备独立像素和设备像素比物理像素、设备独立像素和设备像素比

在CSS中我们一般使用px作为单位，需要注意的是，CSS样式里面的px和物理像素并不是相等的。CSS中的像素只是一个抽

象的单位，在不同的设备或不同的环境中，CSS中的1px所代表的物理像素是不同的。在PC端，CSS的1px一般对应着电脑屏

幕的1个物理像素，但在移动端，CSS的1px等于几个物理像素。

物理像素物理像素(physical pixel)

物理像素又被称为设备像素、设备物理像素，它是显示器（电脑、手机屏幕）最小的物理显示单位，每个物理像素由颜色值和

亮度值组成。所谓的一倍屏、二倍屏(Retina)、三倍屏，指的是设备以多少物理像素来显示一个CSS像素，也就是说，多倍屏

以更多更精细的物理像素点来显示一个CSS像素点，在普通屏幕下1个CSS像素对应1个物理像素，而在Retina屏幕下，1个

CSS像素对应的却是4个物理像素（参照下文田字示意图理解）。

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

设备独立像素又被称为CSS像素，是我们写CSS时所用的像素，它是一个抽像的单位，主要使用在浏览器上，用来精确度量

Web页面上的内容。

设备像素比设备像素比(device pixel ratio)

设备像素比简称为dpr，定义了物理像素和设备独立像素的对应关系：设备像素比＝物理像素 / 设备独立像素。

CSS的1px等于几个物理像素，除了和屏幕像素密度dpr有关，还和用户缩放有关系。例如，当用户把页面放大一倍，那么

CSS中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，CSS中1px所代表的物理像素也会减少一倍。关于这点，

在文章后面的1px细线问题部分还会讲到。

1px细线问题细线问题

在上文我们已经知道，CSS像素为1px宽的直线，对应的物理像素是不同的，可能是2px或者3px,而设计师想要的1px宽的直

线,其实就是1物理像素宽。

对于CSS而言，可以认为是border: 0.5px;，这是多倍屏下能显示的最小单位。然而，并不是所有手机浏览器都能识别border:

0.5px，有的系统里，0.5px会被当成为0px处理，那么如何1px细线问题呢？

使用使用border-image实现实现

根据需求选择图片，然后根据css的border-image属性设置。代码如下：

div

{

-moz-border-image:url(/i/border.png) 30 30 stretch; /* Old Firefox */

-webkit-border-image:url(border.png) 30 30 stretch; /* Safari 5 */

-o-border-image:url(border.png) 30 30 stretch; /* Opera */

border-image:url(border.png) 30 30 stretch;

}

优点：可以设置单条、多条表框。缺点：更换颜色和样式麻烦，某些设备上会模糊。

使用使用background-image实现实现

background-image 跟border-image的方法一样，你要先准备一张符合你要求的图片。优缺点与border-image一样。

.background-image-1px {

background: url(../img/line.png) repeat-x left bottom;

-webkit-background-size: 100% 1px; background-size: 100% 1px;

}

使用使用box-shadow模拟边框模拟边框

.box-shadow-1px {

box-shadow: inset 0px -1px 1px -1px #c8c7cc;

}

优点：代码少，兼容性好。缺点：边框有阴影，颜色变浅。

上面三种方式效果并不是太好

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

weixin_38548589

粉丝: 7
资源: 909

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈