画.5px的线

最新推荐文章于 2024-04-13 00:00:00 发布
最新推荐文章于 2024-04-13 00:00:00 发布
阅读量108 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40728708/article/details/113817564
版权
这篇博客介绍了如何利用SCSS的特性，结合px到rem的转换方法，创建出视觉上只有0.5px的分割线。作者提到了使用content、position、transform等CSS属性，并通过VSCode的插件调整1rem的像素值，以适应不同设备的显示需求。
摘要由CSDN通过智能技术生成

画.5px的分割线
我这里用到了px转换为rem，以及scss的知识

&::after {
   /*.03125rem下边框*/
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0.05rem;
    background-color:$light-black;
    transform: scaleY(0.5);
    transform-origin: center top;
    z-index: 2;
}

veCode的px转换为rem：

  1. flexible.js
  2. vsCode的插件px to rem
    可以通过插件的扩展设置来调整1rem=?px
    没有默认转换快捷键，可自己设置。
bigBravery_L
关注
三种方式画一条0.5px的线
rainylululululu的博客
05-05 2796
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</titl...
画0.5px 1px 1.5px 的线
qq_44622064的博客
03-30 696
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
css画一条0.5px的直线
Frank_colo的博客
09-28 680
用到css3的transform的scaleY(0.5)函数，对象图形进行变形缩放，0.5表示缩放成原来的一半。一些用来装饰的图形，比如字体的前面或者后面设置图标，画一条线。如果要画很细很细的线，0.5px ,怎么画。
如何画一条0.5px的线
Y0admin的博客
07-21 1305
移动技术的出现，将屏幕显示技术带入 Retina 级别，现在绝大部分移动端设备都达到或者超过了 Retina 级别，但是由于移动端的屏幕分辨率和浏览器的分辨率有一些换算关系，导致在浏览器中的 1 个像素会占用屏幕的 2 个或者 2 个以上的像素，这样使得 Mobile Web 的 UI 在精细程度上大打折扣。但是我们还是有技术的手段来解决这个问题。 border-width: 0.5px 直接通过样式来设置0.5px的边框。当然这个方案是非常理想的方案，但是事实总是残酷的，它只在 iOS 8+ 上支持，
CSS 画一条0.5px的线的方法（ 4种 ）
大剑师兰特的GIS世界
04-13 3294
在CSS中直接设置`border-width`为0.5px通常不会得到理想中的0.5个物理像素宽度的线条，尤其在高DPI屏幕下，由于浏览器会对小于1px的数值进行四舍五入处理，所以直接写0.5px可能会被渲染成1px的线条。
css 0.5px 间隔细线 | border 细线的实现 参考WeUI
huch的博客
07-31 9699
在Android中系统是识别0.5dp的，但是在web中浏览器内核在遇到0.5px时会向上取整为1px。 前端UI设计的间隔线都是设计0.5px，这时候用border-bottom: 1px solid #e6e6e6; 效果还是很粗的，UI复核页面的时候肯定不过关的。 下面说一下参考WeUI的解决方案： WeUI 间隔线 先看WeUI源码的实现 提取核心： .weui-...
HTML5-Canvas线条背景动画.zip
07-11
代码片段： <body> <canvas id=c></canvas> [removed][removed] ; font:normal 14px/24px 'MicroSoft YaHei';">
详解Html5 Canvas画线有毛边解决方法
09-28
c1.drawLine([{x:200.5,y:10},{x:200.5,y:200}],{lineWidth:1,strokeStyle:'rgb(0,0,0)'});//+0.5偏移 ``` 在第二个`drawLine`调用中，使用了普通的坐标值没有进行偏移，导致线条有毛边。而在第三个调用中，终点...
HTML5 Canvas画板钢笔绘制线条特效.zip
07-11
 padding: 12px 24px;  border-radius: 0;  position: fixed;  left: 50%;  bottom: 24px;  -webkit-transform: translateX(-50%);  transform: translateX(-50%);  text-transform: uppercase;  ...
zuoxiaobai#zuo11.com#画比1px还细的线或border1
07-25
"description": "画比1px还细的线或border","keywords": "一般使用transform缩小0.5倍来实现，如果是border先
如何实现.5px的线条和.5px的圆角边框
08-22 496
实现.5px的线条 网络上有很多方法，如设置viewport，box-shawdow，border-image，background-image，transform:scale等，这里不做介绍(百度或者谷歌“retina 1px 边框”有答案)，本文只介绍一种觉得比较好用的方法，一来兼容性好，二来不依赖图片。 transform:scale(x,y) 通过css支持定义border...
前端面试题：如何画一条0.5px的线
想搞全栈的前端
09-22 1万+
前言 理论上1px已经是最小单位了，那如何画一条0.5px的线呢？ 有以下两种方法 解决方法 采用meta viewport的方式 <meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/> 这样子就能缩放到原来的0.5倍...
使用css3做0.5px的细线
热门推荐
Wang的专栏
07-24 2万+
webapp中的CSS3实现 0.5px的细线 感觉很长时间没写过博客了，最近生活还算稳定，过得较为充实，所以又要开始写写东西了，一个是为了做些记录，是怕自己某一天，忘记了，回头翻翻博客，就会再次的拾起来，记忆，就是这样。 曾看过淘宝，京东，易迅，一号店等等电商的移动端网站，这些大的电商站的共同特点是做的精致，用户体验良好，其中在布局方面 ， 0.5px的线看上去就比1px的线看上去要
怎么画一条0.5px的边（更新）
weixin_34284188的博客
03-24 875
（文章有更新，添加了SVG方案的讨论以及transform的方法是可以的）什么是像素？像素是屏幕显示最小的单位，在一个1080p的屏幕上，它的像素数量是1920 * 1080，即横边有1920个像素，而竖边为1080个。一个像素就是一个单位色块，是由rgba四个通道混合而成。对于一个1200万像素的相机镜头来说，它有1200万个感光单元，它能输出的最大图片分辨率大约为3000 * 4000。那么像...
前端页面设计0.5px的线
qq_43940172的博客
04-06 2575
css实现0.5px的线&background-img属性
如何用css3画一根优雅的0.5px细线
凝视深渊
03-12 8713
利用细线布局、区分页面是常用的手段。一般UI为了美观都会采用 0.5 px 而不是 1px 的细线。而这就造成了问题：由于屏幕和设计稿的分辨率转换，如果在border中直接定义为0.5 px, 会造成有时候细线被抹杀成 0 px，从而看不到， 如果定义为 1px， 则实际显示的时候会变成 2px， 就失去了UI设计细线的原意。那么，该如何画一根优雅的 .5px 细线呢？ 这可以用css3的tra...
5116-微信小程序电影院订票选座系统设计及实现+ssm（源码+数据库+lun文）.zip
最新发布
09-15
本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。
JavaScript 中的 `Array.prototype.filter` 方法全解析
09-15
在 JavaScript 编程中，处理数组是一项基本而重要的任务。数组的过滤操作是其中的一个常见需求，Array.prototype.filter 方法为此提供了强大的支持。本文将深入探讨 Array.prototype.filter 方法的工作原理、使用场景、代码示例以及与其他数组方法的比较。 Array.prototype.filter 是 JavaScript 中处理数组的强大工具，它允许开发者以声明式的方式轻松筛选出符合特定条件的元素。通过结合使用 Array.prototype.filter 和其他数组方法，可以解决各种复杂的数据筛选问题。 通过本文的详细介绍和示例代码，你应该能够掌握 Array.prototype.filter 的工作原理，并能够在实际开发中灵活运用它来处理数组数据。此外，了解其与 Array.prototype.map 和 Array.prototype.reduce 的结合使用，可以帮助你更好地编写高效且易于维护的代码。
HTML5 canvas实现网页自由画线功能
在HTML5的网页中实现随意画线的功能，利用HTML5的Canvas API为开发人员提供了一个动态绘图环境。HTML5 Canvas 是一个在网页上绘制图形的强大工具，它允许开发者在浏览器中创建丰富的交互式内容，如图形、动画和游戏...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值