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

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

这里介绍使用:transform: scale 缩放的方式显示

typescript 复制代码
<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>```
相关推荐
大模型铲屎官1 小时前
告别页面刷新!如何使用AJAX和FormData优化Web表单提交
前端·javascript·ajax·html·编程·页面刷新·表单提交
无限大.4 小时前
前端知识速记--HTML篇:src和href
前端·html
子非鱼9214 小时前
两栏布局、三栏布局、水平垂直居中
前端·javascript·css
程序猿小D5 小时前
第三百五十八节 JavaFX教程 - JavaFX滑块
java·前端·数据库
GISer_Jing6 小时前
React中useState()钩子和函数式组件底层渲染流程详解
前端·react.js·前端框架
私人珍藏库7 小时前
Google Chrome-便携增强版[解压即用]
前端·chrome
我的青春不太冷8 小时前
【实战篇章】深入探讨:服务器如何响应前端请求及后端如何查看前端提交的数据
运维·服务器·前端·学习
Anlici9 小时前
2025前端高频面试题--CSS篇
前端·css
追光少年33229 小时前
Learning Vue 读书笔记 Chapter 4
前端·javascript·vue.js
软件2059 小时前
【Vite + Vue + Ts 项目三个 tsconfig 文件】
前端·javascript·vue.js