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

最新推荐文章于 2024-07-09 18:45:02 发布
原创 最新推荐文章于 2024-07-09 18:45:02 发布 · 823 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

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

本文探讨了1像素边框在高像素密度屏幕上的显示问题，解释了物理像素与逻辑像素的区别，以及像素比的概念。提出了三种解决方案：使用媒体查询、transform:scale(0.5)以及结合两者的策略，帮助开发者在不同设备上实现精确的1px边框效果。
  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中的边框
YabClass的博客
09-24 585
使用JavaScript，我们可以选择需要去除边框的元素，并通过修改其CSS样式来实现去除边框的效果。使用CSS，我们可以定义一个去除边框的类，并将其应用于需要去除边框的元素上。一个常见的需求是去除元素的边框，以便在视觉上改变元素的外观。我们可以通过在CSS样式表中为元素添加一个新的类，并将其应用于需要去除边框的元素上。要去除边框，我们可以将边框的宽度设置为0，或者将边框的样式设置为。将上述的JavaScript代码添加到网页中，当页面加载完成后，该元素的边框将被去除。在上面的例子中，我们可以将。
border.css（移动端1像素问题解决）
qq_44196374的博客
02-23 884
发现：对于不同的移动设备，其物理像素与逻辑像素间存在不同的比例关系。 作用：可以解决1像素边框解决多像素边框问题 下面是border.css样式代码分享 @charset "utf-8"; .border, .border-top, .border-right, .border-bottom, .border-left, .border-topbottom, .border-rightleft, ...
网页元素和元素之间有空白边框_1像素边框问题
weixin_39574708的博客
11-25 510
对于前端开发者来说，要处理这个问题，必须先补充一个知识点，就是设备的 物理像素[设备像素] & 逻辑像素[CSS像素]；在我的另外一片文章 设计稿的100%还原 做了介绍，感兴趣的朋友可以查阅一下。 # 为什么1px变粗了？ 为什么移动端CSS里面写了1px，实际上看起来比1px粗；了解设备物理像素和逻辑像素的同学应该很容易理解，其实这两个px的含义其实是不一样的，UI设计师要求的1p...
移动端1像素边框问题
Suk__的博客
02-17 372
在移动端不同设备的dpr(物理像素比)不一样,导致1px的逻辑像素渲染出不同的粗细,比如dpr=3时1个逻辑像素点(1px)=3个物理像素点 这不是我们想要的 我们要在所有不同dpr的设备上显示1px的效果保持一致。
img标签设置背景图片，始终有一个像素的border怎么破？
ljw_Josie的博客
07-17 3878
用img标签来设置背景图片，无论你怎么给border加样式都会发现一条摆脱不掉的边框，这是浏览器为了识别img标签自带的一个类似于“占位符”的标记，就是为了告诉这里有张图片。没啥作用。怎么消除这条边框呢？ 最佳解决办法： 你换个标签呗，不就是显示一张背景图么？干嘛非要用img标签？ 或者 加一句css，使他没有src的时候透明度为0就可以了。 img[src=""]{ ...
移动端解决一像素边框问题。拿走不谢，border.css
weixin_34124577的博客
04-15 1034
@charset "utf-8"; .border, .border-top, .border-right, .border-bottom, .border-left, .border-topbottom, .border-rightleft, .border-topleft, .border-rightbottom, .border-topright, .border-bottomleft { ...
reset.css引入以及1px边框问题的解决方法
09-22
为了解决这个问题，我们可以创建一个名为`border.css`的文件，使用一些技巧来确保边框在不同设备上始终显示为1px。 一种常见的解决方案是利用CSS3的`transform`属性和`scale`函数。例如： ```css .border-1px { ...
CSS技巧专栏：一日一例 2.纯CSS实现 多彩边框按钮特效
最新发布
uu0216的博客
07-09 1236
content:attr(alt); 通过attr函数 获取本标签的alt值，之所以要这么做，是因为after生成的填充色的图层，会覆盖到按钮上面，导致按钮上写的文字不可见。所以，我们要通过content来输出按钮上的文字。这样写，也是为了让样式和内容脱离。这样我们在html的代码上，给 button 控件写上 alt文字，就可以通过css获取这个文字并输出了。这样，也方便后台程序通过程序动态修改 alt标签输出 的文字，达到修改按钮文字的目标，而不需要去手动修改css文件中的文字。
使用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;`这个声明使得表格所有单元格的边框合并，消除间距，...
第16章 CSS边框与边界.pdf
08-04
- `border-width`: 用于设定边框的宽度，可以是像素值、百分比或其他长度单位。同样，你可以分别指定四个边的宽度，或使用简写形式。 - 示例： ```css border-width: 1px 2px 3px 4px; /* 分别对应上右下左的...
详解CSS清除图片下几像素空白间隙的方法
01-18
最近有伙伴问小编的问题： 页面排版的时候发现图片下面有那么1-2像素的间隙空白，怎么去除。 这个是浏览器的一个设计问题。img本来是行内元素，却可以用width 和height,当父元素没有设置高度的时候，用子元素们的高度计算出的高度给父元素的时候就会出现3px空隙这类的问题。 去除图片下间隙的方法一 img{display:block;} 方法2 img{vertical-align:top;} 除了top值，还可以设置为text-top | middle | bottom | text-bottom，甚至特定的<length>和<percentage>值都可以 方法3 #qdxw{f
css 诡异的多出来的几像素
weixin_30362233的博客
09-28 224
可以设置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 347
在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 182
删除HTML元素可以使用remove及empty，下面有关这两个方法的使用将以示例的方式为大家介绍下jQuery使用下面两个方法来删除或是清空某个HTML元素。remove() – 删除指定的元素(包括其子元素)empty() – 清空指定元素的子元素例如：JQuery Demo$(document).ready(function () {$("button").click(function ()...
页面制作-用好border和clear
weixin_34064653的博客
04-13 94
2019独角兽企业重金招聘Python工程师标准>>> ...
移动端1像素（1px）边框（border）实现
LzzMandy的博客
11-07 931
<div class="tab">1像素边框实现</div> 1、1像素边框样式可以在多个地方使用，可以用方法的形式实现，.tab样式如下： <style lang="stylus" rel="stylesheet/stylus"> @import "./common/stylus/mixin.styl" .tab display: fl...
移动端1px问题border.css
LLL_liuhui的博客
08-10 720
@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 8474
css/小程序去掉button/div/form边框
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值