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>```
相关推荐
m0_741412241 分钟前
大文件上传与文件下载
前端
wu_jing_sheng02 分钟前
Python中使用HTTP 206状态码实现大文件下载的完整指南
开发语言·前端·python
90后的晨仔8 分钟前
Vue3项目全面部署指南:从构建到上线
前端·vue.js
小于小于091216 分钟前
npx 与 npm 区别
前端·npm·node.js
望获linux34 分钟前
【实时Linux实战系列】实时 Linux 在边缘计算网关中的应用
java·linux·服务器·前端·数据库·操作系统
qq_2529241936 分钟前
PHP 8.0+ 现代Web开发实战指南 引
android·前端·php
Jeled36 分钟前
Android 本地存储方案深度解析:SharedPreferences、DataStore、MMKV 全面对比
android·前端·缓存·kotlin·android studio·android jetpack
Mintopia37 分钟前
🎨 AIGC 内容过滤技术:当创作的洪流遇上理性的堤坝
前端·javascript·aigc
Mintopia44 分钟前
⚙️ Next.js 缓存与队列:当数据与请求跳起“低延迟之舞”
前端·全栈·next.js
Shi_haoliu1 小时前
Vue2 + Office Add-in关于用vue项目于加载项控制excel单元格内容(Demo版)
前端·javascript·vue.js·node.js·html·excel·office