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 小时前
Python数据分析工具(三):pymssql的用法
开发语言·前端·数据库·python·oracle·数据分析·pymssql
(⊙o⊙)~哦3 小时前
JavaScript substring() 方法
前端
无心使然云中漫步4 小时前
GIS OGC之WMTS地图服务,通过Capabilities XML描述文档,获取matrixIds,origin,计算resolutions
前端·javascript
Bug缔造者4 小时前
Element-ui el-table 全局表格排序
前端·javascript·vue.js
xnian_4 小时前
解决ruoyi-vue-pro-master框架引入报错,启动报错问题
前端·javascript·vue.js
麒麟而非淇淋5 小时前
AJAX 入门 day1
前端·javascript·ajax
2401_858120535 小时前
深入理解MATLAB中的事件处理机制
前端·javascript·matlab
阿树梢5 小时前
【Vue】VueRouter路由
前端·javascript·vue.js
随笔写7 小时前
vue使用关于speak-tss插件的详细介绍
前端·javascript·vue.js
史努比.7 小时前
redis群集三种模式:主从复制、哨兵、集群
前端·bootstrap·html