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>```
相关推荐
码客前端4 分钟前
理解 Flex 布局中的 flex:1 与 min-width: 0 问题
前端·css·css3
Komorebi゛4 分钟前
【CSS】圆锥渐变流光效果边框样式实现
前端·css
工藤学编程17 分钟前
零基础学AI大模型之CoT思维链和ReAct推理行动
前端·人工智能·react.js
徐同保17 分钟前
上传文件,在前端用 pdf.js 提取 上传的pdf文件中的图片
前端·javascript·pdf
怕浪猫18 分钟前
React从入门到出门第四章 组件通讯与全局状态管理
前端·javascript·react.js
欧阳天风26 分钟前
用setTimeout代替setInterval
开发语言·前端·javascript
EndingCoder29 分钟前
箭头函数和 this 绑定
linux·前端·javascript·typescript
郑州光合科技余经理30 分钟前
架构解析:同城本地生活服务o2o平台海外版
大数据·开发语言·前端·人工智能·架构·php·生活
沐墨染32 分钟前
大型数据分析组件前端实践:多维度检索与实时交互设计
前端·elementui·数据挖掘·数据分析·vue·交互
xkxnq35 分钟前
第一阶段:Vue 基础入门(第 11 天)
前端·javascript·vue.js