Css解决浏览器缩放后,边框与图片之间有空白的问题

关键词 Css

前言

在项目开发的过程中,提高浏览器分辨率后,边框与图片之间会显示一点空白

原因

当缩放到175%时,应该1.75格代表1像素,但由于硬件层次限制,比如一格用四个物理像素点绘制,0.25格就不绘制,故1.75格中的0.75,只能用三格绘制,未绘制的一格产生了空隙

解决步骤

使用outline代替border,因为outline不占据空间,故未绘制的地方不会影响其他元素占据

复制代码
 outline:solid 1px #000;

后言

最近工作很忙,没有时间更新。希望本文会对你有所帮助,如果有什么问题,可在下方留言沟通

相关推荐
Z兽兽1 小时前
React@18+Vite项目配置env文件
前端·react.js·前端框架
SuniaWang1 小时前
《Spring AI + 大模型全栈实战》学习手册系列 · 专题六:《Vue3 前端开发实战:打造企业级 RAG 问答界面》
java·前端·人工智能·spring boot·后端·spring·架构
A_nanda2 小时前
根据AI提示排查vue前端项目
前端·javascript·vue.js
happymaker06262 小时前
web前端学习日记——DAY05(定位、浮动、视频音频播放)
前端·学习·音视频
~无忧花开~2 小时前
React状态管理完全指南
开发语言·前端·javascript·react.js·前端框架
LegendNoTitle3 小时前
计算机三级等级考试 网络技术 选择题考点详细梳理
服务器·前端·经验分享·笔记·php
@大迁世界3 小时前
1.什么是 ReactJS?
前端·javascript·react.js·前端框架·ecmascript
BJ-Giser4 小时前
Cesium 基于EZ-Tree的植被效果
前端·可视化·cesium
王码码20355 小时前
Flutter for OpenHarmony:Flutter 三方库 algoliasearch 毫秒级云端搜索体验(云原生搜索引擎)
android·前端·git·flutter·搜索引擎·云原生·harmonyos
发现一只大呆瓜5 小时前
深入浅出 AST:解密 Vite、Babel编译的底层“黑盒”
前端·面试·vite