0.5px惹的祸

最新推荐文章于 2025-04-20 21:55:03 发布
最新推荐文章于 2025-04-20 21:55:03 发布 · 304 阅读 · 0
文章标签：

#ui

近日进行UI改造时遇到浏览器兼容问题，一直未能解决。偶然将CSS中的0.5px改为1px后，问题得以解决，特此记录。

近日UI改造，遇一浏览器兼容问题，久攻不破，偶见css中0.5px，改之1px，遂破，此记以戒。

精选资源
css实现0.5px线条解决移动端兼容问题(推荐)
01-18
0.5px线实现方法</title> <style type=text/css> /*标准1px边框*/ .b1{ height: 40px; border: 1px solid #ff0000; } /*1.可以利用利用渐变样式=>实现.5px*/ .a1{ height: 1px; margin-top: ...
使用css3做0.5px的细线的示例代码
01-21
Webapp中的CSS3实现 0.5px的细线 感觉很长时间没写过博客了，最近生活还算稳定，过得较为充实，所以又要开始写写东西了，一个是为了做些记录，是怕自己某一天，忘记了，回头翻翻博客，就会再次的拾起来，记忆，就是...
android 模糊线条,android上实现0.5px线条的原理分析
weixin_29371981的博客
06-03 349
由于安卓手机无法识别border: 0.5px，因此我们要用0.5px的话必须要借助css3中的-webkit-transform:scale缩放来实现。原理：将伪元素的宽设为200%，height设为1px通过-webkit-transform:scale(.5)来进行缩小一倍，这样就得到border为0.5的边框Document.div{width: 100%;height: 100px;bo...
移动端实现0.5px的实用方案
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
04-12 4291
我们知道，理论上px的最小单位是1，但在设置px值时，直接设置0.5px不同浏览器的差异比较大，并且我们看到不同系统的不同浏览器对小数点的px有不同的处理。Chrome会把0.5px四舍五入变成了1px，把小于0.5px的当成0，Firefox会把不小于0.55px当成1px，Safari是把不小于0.75px当成1px。所以以下就总结了实现0.5px的实现方式。 方案1: 伪元素+scale (兼容性最好，推荐) 实现方式：给容器设置伪元素，设置绝对定位，宽高都是200%，边框是1px，然后使用trans
CSS中，设置 0.5px 会生效吗
Keep trying, keep going
06-12 800
在高分辨率屏幕（例如 Retina 屏幕）上，0.5px 的设置通常会生效，因为这些屏幕具有更高的像素密度，可以显示更细的细节。在这些设备上，1 个 CSS 像素可能对应多个设备像素，因此可以实现 0.5px 的效果。，因为这些屏幕的像素密度较低，可能无法精确地显示半个像素的大小。在这种情况下，浏览器会对 0.5px 的值进行。在 CSS 中，设置 0.5px 是有效的，浏览器会尝试渲染出这种细微的大小差异。然而，在低分辨率屏幕上，0.5px 的设置可能无法完美呈现。
130、如何解决移动端0.5px的问题
sunnnnh的博客
10-18 1365
1、移动端边框变粗的原因？ 在浏览器端1px线看起来的确很细,但一旦放在手机上,就显得很粗,原因如下: 在移动端，1px 的直线在物理屏幕上通常会显示成 2px（甚至更粗）。这是因为手机屏幕的物理分辨率（硬件支持的）通常是其逻辑分辨率（软件支持的）的数倍。 因为css中的1px并不等于移动设备的1px，这些由于不同的手机有不同的像素密度。在window对象中有一个devicePixelRatio属性，他可以反应css像素与设备像素比：devicePixelRatio = 物理像素 / 独立像素。 以
CSS篇：极致细节的追求：6种实现0.5px细线的现代方案
最新发布
欢迎来到我的前端博客！这里汇集了关于前端开发的最新技术、实用工具和经验分享。我将为你提供详细的教程、代码示例和实战案例，帮助你掌握Web开发的核心概念和技能。不论你是初学者还是有经验的开发者，这个博客都适合你。
04-20 864
在Retina等高PPI屏幕普及的今天，传统的1px边框往往显得过于粗犷。设计师追求的极致细节需要我们实现真正的"细线"效果。特别是在制作分割线、边框等元素时，0.5px的线条能够带来更加精致的视觉体验。下面我们就来探索各种实现方案。
css中引入svg来兼容部分安卓机显示0.5px边框的示例
09-24
在众多浏览器中，部分安卓系统的原生浏览器对CSS的某些属性支持不佳，特别是对于低于1像素（0.5px）的边框显示效果。众所周知，在高清屏幕（如Retina屏幕）上，浏览器可以显示小于1像素的边框，但是部分安卓设备却...
如何画一条0.5px的线
DZQ1223的博客
06-13 457
【代码】如何画一条0.5px的线。
02.画一条0.5px的直线，有哪几种方法？
2301_76830583的博客
10-10 1510
画0.5px直线的方法挺多的。其中viewport比较万能，但仅用于移动端；transform、渐变和阴影方法都不错；SVG和canvas以前用得不多，这次总结后发现功能还挺全面的
6. css盒模型+画一条0.5px的线
qq_43456781的博客
10-09 1962
6. css盒模型+画一条0.5px的线 （1）说一下css盒模型 简介：就是用来装页面上的元素的矩形区域。CSS中的盒子模型包括IE盒子模型和标准的W3C盒子模型。 box-sizing(有3个值哦)：border-box,padding-box,content-box. 标准盒子模型： IE盒子模型： 区别：从图中我们可以看出，这两种盒子模型最主要的区别就是width的包含范围，在标准的盒子模型中，width指content部分的宽度，在IE盒子模型中，width表示content+padding+
移动端0.5px实现过程入的坑---有的下边框无法显示
weixin_37347069的博客
12-04 3490
众所周知在移动的端写1px边框，显示出来的效果看起来比较粗，那么下面介绍一种常见的0.5px 的实现方案； 利用css3的缩放方式实现，其原理是：transform:scale()来达到压缩一半的目的。 html部分： &lt;ul class="cardList" v-show="selected == 1"&gt; &lt;li class="cardItem" v-for="...
解决上面div背景色和下面div背景色之间的0.5px的间隙
风烟
03-30 1360
问题是这个样子的，我写了一个div有个背景色，然后下面也有个div有个背景色，然后他两之间有个1px的白色间隙，代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev...
怎么画一条0.5px的边
故里的博客
11-30 409
什么是像素？像素是屏幕显示最小的单位，在一个1080p的屏幕上，它的像素数量是1920 * 1080，即横边有1920个像素，而竖边为1080个。一个像素就是一个单位色块，是由rgba四个通道混合而成。对于一个1200万像素的相机镜头来说，它有1200万个感光单元，它能输出的最大图片分辨率大约为3000 * 4000。那么像素本身有大小吗，一个像素有多大？有的，如果一个像素越小，那么在同样大小的屏幕上，需要的像素点就越多，像素就越密集，如果一英寸有435个像素，那么它的dpi/ppi就达到了435。Macb
CSS3实现0.5px的边框+渐变+伪元素补充
weixin_44471622的博客
04-29 1008
面试的时候被问到如何使用css3实现0.5的边框，当时脑袋蒙圈，想着直接设置border为0.5px，但肯定是不可以的。 思路： 将元素的伪类高度设为1px,使用css3的渐变（linear-gradient），50%有颜色，50%透明，个人感觉思路没有问题，不知为何页面不展示线条。 伪类 + scaleY(0.5) 实现边框为0.5px 伪类+linear-gradient <!D...
怎么画一条0.5px的边（更新）
weixin_34284188的博客
03-24 931
（文章有更新，添加了SVG方案的讨论以及transform的方法是可以的）什么是像素？像素是屏幕显示最小的单位，在一个1080p的屏幕上，它的像素数量是1920 * 1080，即横边有1920个像素，而竖边为1080个。一个像素就是一个单位色块，是由rgba四个通道混合而成。对于一个1200万像素的相机镜头来说，它有1200万个感光单元，它能输出的最大图片分辨率大约为3000 * 4000。那么像...
华为模拟器eNSP基本命令
热门推荐
Key_book(句芒安全实验室)
06-01 11万+
华为模拟器eNSP常用命令 最近一段了解网络协议，使用了华为模拟器eNSP搭建了几个路由实验，分享一下在搭建过程中，经常使用的命令. 路由器命令行常用命令: 1. system-view 进入系统视图,默认我们打开命令行前面提示是尖括号&lt;&gt;，此为用户视图，当我们输入sys时就可以进入系统视图来对路由进行操作了 interface + 接口名 用来设置接口，例如路由器上...
CSS细线技巧：0.5px边框与圆角实现教程
本文档详细介绍了如何在CSS中实现精细到0.5px的线条效果，这对于提升网页设计的细节呈现和移动端体验至关重要。主要内容包括以下几个方面： 1. 0.5px边框：通过使用伪元素（`:before`或`:after`）并设置为绝对定位...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值