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

关键词 Css

前言

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

原因

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

解决步骤

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

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

后言

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

相关推荐
专注VB编程开发20年3 分钟前
CSS定义网格的列模板grid-template-columns什么意思,为什么要用这么复杂的单词
前端·css
IT_陈寒9 分钟前
Redis性能提升50%的7个关键优化策略,90%开发者都不知道第5点!
前端·人工智能·后端
Hilaku16 分钟前
深入URL和URLSearchParams:别再用正则表达式去折磨URL了
前端·javascript·代码规范
pubuzhixing21 分钟前
Canvas 的性能卓越,用它解决一个棘手问题
前端
weixin_4569042722 分钟前
Vue.jsmain.js/request.js/user.js/store/index.js Vuex状态管理项目核心模块深度解析
前端·javascript·vue.js
伍哥的传说25 分钟前
Vue 3.6 Alien Signals:让响应式性能飞跃式提升
前端·javascript·vue.js·vue性能优化·alien-signals·细粒度更新·vue 3.6新特性
永日4567029 分钟前
学习日记-HTML-day51-9.9
前端·学习·html
狗头大军之江苏分军1 小时前
iPhone 17 vs iPhone 17 Pro:到底差在哪?买前别被忽悠了
前端
小林coding1 小时前
再也不怕面试了!程序员 AI 面试练习神器终于上线了
前端·后端·面试
文心快码BaiduComate1 小时前
WAVE SUMMIT深度学习开发者大会2025举行 文心大模型X1.1发布
前端·后端·程序员