border.css 清除1像素边框的问题

最新推荐文章于 2023-02-17 20:30:22 发布
最新推荐文章于 2023-02-17 20:30:22 发布
阅读量784 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： Vue 文章标签： border.css 清除1像素边框的问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Ada_lake/article/details/102642413
本文探讨了1像素边框在高像素密度屏幕上的显示问题，解释了物理像素与逻辑像素的区别，以及像素比的概念。提出了三种解决方案：使用媒体查询、transform:scale(0.5)以及结合两者的策略，帮助开发者在不同设备上实现精确的1px边框效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

  1. 1像素边框的问题是什么问题
  2. 如何解决1像素边框的问题

1. 1像素边框的问题是什么问题

物理像素：设备本身的像素，出厂即固定
逻辑像素: css像素，viewport上的一个小方格
像素比： 如果物理像素和逻辑像素是 1:1 时，表示一个物理像素显示一个css像素
当比例为 2:1 时，表示4个物理像素显示1个css像素
【通过js的window.devicePixelRatio来获取 OR 通过媒体查询的 -webkit-min-device-pixel-ratio 来获取】
css中1px的长度在2倍屏或3倍屏上，被映射到物理像素上有2px或3px长

2. 如何解决1像素边框的问题

1. 媒体查询

查询 -webkit-min-device-pixel-ratio

2. transform: scale(0.5) 方案 - 推荐: 很灵活

缩放元素为原来的一半

3. 媒体查询+transform

显示屏最小像素比是 2.5 时：
在这里插入图片描述
width 和 height 是什么意思？？？
自己实例的时候，没看出来区别。。。

CSS技巧专栏：一日一例 2.纯CSS实现 多彩边框按钮特效
uu0216的博客
07-09 1147
content:attr(alt); 通过attr函数 获取本标签的alt值，之所以要这么做，是因为after生成的填充色的图层，会覆盖到按钮上面，导致按钮上写的文字不可见。所以，我们要通过content来输出按钮上的文字。这样写，也是为了让样式和内容脱离。这样我们在html的代码上，给 button 控件写上 alt文字，就可以通过css获取这个文字并输出了。这样，也方便后台程序通过程序动态修改 alt标签输出 的文字，达到修改按钮文字的目标，而不需要去手动修改css文件中的文字。
W3school：CSS基础：CSS边框、CSS边距、CSS高度/宽度、CSS框模型、CSS轮廓
薇眠winter的博客
08-04 1510
W3school：CSS基础：CSS边框、CSS边距、CSS高度/宽度、CSS框模型、CSS轮廓
img标签设置背景图片，始终有一个像素的border怎么破？
ljw_Josie的博客
07-17 3807
用img标签来设置背景图片，无论你怎么给border加样式都会发现一条摆脱不掉的边框，这是浏览器为了识别img标签自带的一个类似于“占位符”的标记，就是为了告诉这里有张图片。没啥作用。怎么消除这条边框呢？ 最佳解决办法： 你换个标签呗，不就是显示一张背景图么？干嘛非要用img标签？ 或者 加一句css，使他没有src的时候透明度为0就可以了。 img[src=""]{ ...
移动端解决一像素边框问题。拿走不谢，border.css
weixin_34124577的博客
04-15 1018
@charset "utf-8"; .border, .border-top, .border-right, .border-bottom, .border-left, .border-topbottom, .border-rightleft, .border-topleft, .border-rightbottom, .border-topright, .border-bottomleft { ...
css 诡异的多出来的几像素
weixin_30362233的博客
09-28 213
可以设置display: block;/*用来去除div下边莫名多出来的3px的像padding-bottom的东西。*/vertical-align: middle; 亦可父元素font-size:0;line-height:0; 亦可 转载于:https://www.cnblogs.com/yufu/p/3998803.html...
border 1像素问题
拿回忆下酒
07-24 330
在h5页面中，我们直接设置border为1px，发现在不同的手机中，粗细程度是不一样的，但是我们又想要统一，那怎么办呢？ 通过伪类设置高度，然后压缩 .g-border{position: relative;} .g-border:after{content:'';position: absolute;bottom:0;width:100%;height:2rpx;background:$back-dc;overflow: hidden;left:0;transform:translate(0%,0) sc
jquery 移除border_jQuery 删除或是清空某个HTML元素示例
weixin_30047651的博客
12-31 169
删除HTML元素可以使用remove及empty，下面有关这两个方法的使用将以示例的方式为大家介绍下jQuery使用下面两个方法来删除或是清空某个HTML元素。remove() – 删除指定的元素(包括其子元素)empty() – 清空指定元素的子元素例如：JQuery Demo$(document).ready(function () {$("button").click(function ()...
reset.css引入以及1px边框问题的解决方法
09-22
为了解决这个问题，我们可以创建一个名为`border.css`的文件，使用一些技巧来确保边框在不同设备上始终显示为1px。 一种常见的解决方案是利用CSS3的`transform`属性和`scale`函数。例如： ```css .border-1px { ...
使用css如何操作Table没有外边框只有内边框
12-12
而`border-right`和`border-bottom`设置了1像素宽度的实线边框，颜色为#999，也就是灰色，这样就形成了只存在于单元格之间的内边框。 此外，注意到还有针对特定行（tr）和单元格（td）的特殊处理： ```css table ...
css控制表格细边框样式
09-25
为了消除这些间距并使细边框清晰可见，我们可以使用`border-collapse`属性： ```css table { border-collapse: collapse; } ``` `border-collapse: collapse;`这个声明使得表格所有单元格的边框合并，消除间距，...
css解决像素一边框问题
Zhencode的博客
11-17 442
父元素引用 &::before{ content:''; position: absolute;left: 0;top: 0;width: 200%;height: 200%;transform: scale(0.5,0.5); transform-origin: left top;border: 1px solid red;box-sizing: border-box; }...
页面制作-用好border和clear
weixin_34064653的博客
04-13 87
2019独角兽企业重金招聘Python工程师标准>>> ...
移动端1像素（1px）边框（border）实现
LzzMandy的博客
11-07 896
<div class="tab">1像素边框实现</div> 1、1像素边框样式可以在多个地方使用，可以用方法的形式实现，.tab样式如下： <style lang="stylus" rel="stylesheet/stylus"> @import "./common/stylus/mixin.styl" .tab display: fl...
移动端1像素边框问题
Suk__的博客
02-17 343
在移动端不同设备的dpr(物理像素比)不一样,导致1px的逻辑像素渲染出不同的粗细,比如dpr=3时1个逻辑像素点(1px)=3个物理像素点 这不是我们想要的 我们要在所有不同dpr的设备上显示1px的效果保持一致。
网页元素和元素之间有空白边框_1像素边框问题
weixin_39574708的博客
11-25 474
对于前端开发者来说，要处理这个问题，必须先补充一个知识点，就是设备的 物理像素[设备像素] & 逻辑像素[CSS像素]；在我的另外一片文章 设计稿的100%还原 做了介绍，感兴趣的朋友可以查阅一下。 # 为什么1px变粗了？ 为什么移动端CSS里面写了1px，实际上看起来比1px粗；了解设备物理像素和逻辑像素的同学应该很容易理解，其实这两个px的含义其实是不一样的，UI设计师要求的1p...
border.css（移动端1像素问题解决）
qq_44196374的博客
02-23 871
发现：对于不同的移动设备，其物理像素与逻辑像素间存在不同的比例关系。 作用：可以解决1像素边框解决多像素边框问题 下面是border.css样式代码分享 @charset "utf-8"; .border, .border-top, .border-right, .border-bottom, .border-left, .border-topbottom, .border-rightleft, ...
移动端1px问题border.css
LLL_liuhui的博客
08-10 698
@charset "utf-8"; .border, .border-top, .border-right, .border-bottom, .border-left, .border-topbottom, .border-rightleft, .border-topleft, .border-rightbottom, .border-topright, .border-bottomleft {...
CSS去掉border框的方法
no_waw的博客
04-19 8282
css/小程序去掉button/div/form边框
CSS - 移动端 1px 像素边框问题的解决方案（Border.css）
02-09 3202
前言 关于什么是移动端1像素边框问题，先上两张图，大家就明白了。 解决方案 @charset "utf-8"; .border, .border-top, .border-right, .border-bottom, .border-left, .border-topbottom, .border-rightleft, .border-topleft, .border-r......
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值