当前位置: 首页 > news >正文

css实现0.5px宽度/高度显——属性: transform: scale

在大多数设备上,实际上无法直接使用 CSS 来精确地创建 0.5 像素的边框。因为大多数屏幕的最小渲染单位是一个物理像素,所以通常只能以整数像素单位渲染边框。但是,有一些技巧可以模拟出看起来像是 0.5 像素的边框。

这里介绍使用:transform: scale 缩放的方式显示
在这里插入图片描述

<template><div><div>1px</div><div class="container-1px"></div><div>0.5px</div><div class="container-halfpx"></div></div>
</template>
<style>
.container-1px {position: relative;width: 200px;height: 200px;height: 1px;background-color: #000;
}.container-halfpx {position: relative;width: 200px;height: 200px;height: 1px;background-color: #000;transform: scaleY(0.5); /* 缩放为原来的0.5倍,看起来像0.5px的边框 */
}</style>```
http://www.lryc.cn/news/263669.html

相关文章:

  • html懒人加载实现
  • Axure情形动作篇(ERP登录效验)
  • LeetCode刷题--- 子集
  • 【SQL】根据年份,查询每个月的数据量
  • 基于CTF探讨Web漏洞的利用与防范
  • Apache CouchDB 垂直权限绕过漏洞 CVE-2017-12635 已亲自复现
  • 海康威视IP网络对讲广播系统命令执行漏洞(CVE-2023-6895)
  • IDE:DevEco Studio
  • 【QT】C++/Qt使用Qt自带工具windeployqt打包
  • Ubuntu系统的基础操作和使用
  • harmonyOS 自定义组件基础演示讲解
  • 我的创作纪念日——成为创作者第1024天
  • 正点原子驱动开发BUG(一)--SPI无法正常通信
  • SpringBoot接入轻量级分布式日志框架GrayLog
  • 光电器件:感知光与电的桥梁
  • Ceph入门到精通-smartctl 查看硬盘参数
  • Module build failed: TypeError: this.getOptions is not a function
  • 蓝牙电子价签芯片OM6626/OM628超低功耗替代NRF52832
  • ELK(八)—Metricbeat部署
  • Ansible自动化运维以及模块使用
  • 数据分析场景下,企业大模型选型的思路与建议
  • Mongodb复制集架构
  • 云原生之深入解析Kubernetes集群发生网络异常时如何排查
  • error: C2039: “qt_metacast“: 不是 “***“ 的成员
  • 量子计算:开启IT领域的新时代
  • 数据可视化---柱状图
  • 第十七章 爬虫scrapy登录与中间件2
  • 运维知识点-Kubernetes_K8s
  • 某电子文档安全管理系统存在任意用户登录漏洞
  • 音视频参数介绍