当前位置：首页 > news >正文

用CSS画一条0.5px的线

news 来源：原创 2025/8/21 12:51:49

上次面试前端被问到了这个问题，感觉有点懵懵的，我就回答了一个scaleY(0.5),这个是真的没想到，希望有需要的朋友可以去看看。随便记住一种就行。

1.第一种方式：通过缩放1px的线条实现视觉上的0.5px效果，兼容性较好。

.thin-line {position: relative;
}.thin-line::after {content: '';position: absolute;left: 0;right: 0;bottom: 0;height: 1px; /* 初始高度1px */background: #000;transform: scaleY(0.5); /* 垂直缩放至0.5倍 */transform-origin: 0 0; /* 确保缩放基点正确 */
}

2.第二种方式：直接使用0.5px边框（现代浏览器）

.thin-border {border-bottom: 0.5px solid #000;
}

3.第三种方式：使用transform缩放（推荐）结合媒体查询（适配高分辨率屏幕）

.thin-line::after {content: '';/* ...同方法1... */
}/* 高分辨率设备直接使用0.5px */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {.thin-line::after {border-bottom: 0.5px solid #000;transform: none; /* 禁用缩放 */}
}

4.第四种方式：线性渐变：创建极细渐变模拟线条，适合简单场景。

.thin-gradient {background: linear-gradient(to bottom, #000 50%, transparent 50%);height: 1px;transform: scaleY(0.5);
}

5.第五种方式：box-shadow：利用微小阴影模拟线条。

.thin-shadow {box-shadow: 0 0.5px 0 #000;
}

用CSS画一条0.5px的线

上次面试前端被问到了这个问题，感觉有点懵懵的，我就回答了一个scaleY(0.5),这个是真的没想到，希望有需要的朋友可以去看看。随便记住一种就行。 1.第一种方式：通过缩放1px的线条实现视觉上的0.5px效果，兼容性较好。 …...

编程日记 2025/8/21 12:51:49

知识库全链路交互逻辑

阶段顺序 URL输入 → 网络连接 → 前端请求 → 后端处理 → 数据库交互 → 数据返回 → 前端渲染 → 连接关闭阶段1：用户输入URL 用户行为：在浏览器地址栏输入 https://knowledge.com/search?keyword金融趋势浏览器动作： “浏览器解析U…...

编程日记 2025/8/21 12:50:15

BambuStudio学习笔记：Model

# Model.hpp 核心模型结构说明## 文件概述该头文件定义了3D打印数据处理的核心数据结构，包含模型对象、体积、实例、材料等关键类。主要功能包括： - 三维模型数据存储与管理 - 模型变换操作（平移/旋转/缩放） - 打印参数配置 - 多…...

编程日记 2025/8/16 11:36:08

Spring （八）AOP-切面编程的使用

目录实现步骤： 1 导入AOP依赖 2 编写切面Aspect 3 编写通知方法 4 指定切入点表达式 5 测试AOP动态织入图示： 一实现步骤： 1 导入AOP依赖 <dependency><groupId>org.springframewor…...

编程日记 2025/8/18 19:46:48

【Go每日一练】构建一个简单的用户信息管理系统

👻创作者：丶重明 👻创作时间：2025年3月7日 👻擅长领域：运维目录 1.😶‍🌫️题目：简单的用户信息管理系统2.😶‍🌫️代码开发3.😶‍&a…...

编程日记 2025/8/19 17:11:38

PathRAG：通过图剪枝的方法优化Graph-based RAG的性能方法浅析

PathRAG 也是一种新型 Graph-based RAG 方法，通过检索索引图中的关键关系路径，减少噪声并优化 LLM 提示。其核心创新在于基于流的剪枝算法和路径为基础的提示策略，特别适用于捕捉复杂数据集中的关系。（其实可以看做相比GraphRAG假…...

编程日记 2025/8/17 16:42:53

ElementUI 级联选择器el-cascader启用选择任意一级选项，选中后关闭下拉框

1、启用选择任意一级选项在 el-cascader 标签上加上配置项： :props"{ checkStrictly: true }"例如： <el-cascaderref"selectedArrRef"v-model"selectedArr":options"optionsList":props"{ checkStri…...

编程日记 2025/8/16 9:54:31

【软件逆向】QQ 连连看小游戏去广告与一键消除实现

目录一、背景介绍二、去广告实现 2.1 分析广告加载流程 2.2 逆向分析广告加载逻辑 2.3 去广告方案三、一键消除外挂实现 3.1 分析游戏逻辑 3.2 编写外挂插件 3.3 注入外挂： 四、一键消除效果展示五、额外扩展一、背景介绍 QQ 连连看是一款经典的休闲…...

编程日记 2025/8/16 10:01:40

vue el-select 省市区三级联动 vue + element-ui使用第三方插件实现省市区三级联动

vue el-select 省市区三级联动 vue使用第三方插件实现省市区三级联动网上找了好多教程，都是使用el-cascader级联选择器的省市区选择器，但是几乎没有三个单独的el-select的进行关联的三级省市联动组件效果第一步:先安装省市区element-ui的插件 npm install element-china-a…...

编程日记 2025/8/21 2:53:06

【GPT入门】第8课大语言模型的自洽性

【GPT入门】第8课大语言模型的自洽性 1.自洽性概念2.代码（观察执行结果）3.自洽性核心思想 1.自洽性概念大模型的自洽性（self - consistency）是指在推理阶段，大模型通过生成多个答案并选择出现频率最高的那个&#x…...

编程日记 2025/8/18 13:32:21

工程化与框架系列（28）--前端国际化实现

前端国际化实现 🌍 引言前端国际化（i18n）是现代Web应用中的重要组成部分，它能够让应用支持多语言和多地区的用户使用。本文将深入探讨前端国际化的实现方案和最佳实践，包括文本翻译、日期时间格式化、货币处理等方面…...

编程日记 2025/8/16 9:54:08

【阿里云】操作系统控制台操作体验与性能评测全解析

引言在现代的云计算环境中，操作系统控制台是进行系统管理和运维的重要工具。它不仅帮助用户高效地管理云端资源，还提供了智能助手、系统诊断、性能观测等功能，能够提升操作系统的使用效率，增强用户的操作体验。本文简要介绍了操…...

编程日记 2025/8/19 2:33:14

面试之《IntersectionObserver的使用》

IntersectionObserver 是一个 Web API，用于异步观察目标元素与其祖先元素或顶级文档视口（viewport）交叉状态的变化。这在很多场景下非常有用，比如懒加载图片、实现无限滚动加载更多内容等。下面详细介绍它的使用方法。基本原理 …...

编程日记 2025/8/19 10:08:05

在 Spring Boot 2.7.x 中引入 Kafka-0.9 的实践

文章目录在 Spring Boot 2.7.x 中引入 Kafka-0.9 的实践一、下载 Kafka-0.9二、启动 Zookeeper 和 Kafka三、创建 Spring Boot 项目四、引入 kafka 依赖五、移除 Kafka 自动配置六、编写 Kafka 生产者6.1 Kafka配置类6.2 生产者监听类七、编写Controller发送Kafka八、验证消费…...

编程日记 2025/8/15 18:39:40

【MACOS】用户数据过多

进入下面的路径下找到.Spotlight-V100文件夹 /System/Volumes/Data修改选线通过终端权限不够在finder中进行查看然后解锁然后添加权限使用代码查看存储数据。 diskutil apfs list...

编程日记 2025/8/17 21:25:58

鸿蒙系统中的持续部署

鸿蒙操作系统，作为一款面向未来的分布式操作系统，旨在为不同的设备提供统一的操作系统平台。它支持多种终端设备，包括但不限于智能手机、平板电脑、智能穿戴设备和物联网（IoT）设备等，并且能够实现跨平台的无…...

编程日记 2025/8/16 12:29:43

1. 下载并安装 MySQL Yum 仓库从 MySQL 官方网站下载并安装 Yum 仓库配置文件。 # 下载MySQL 8.0的Yum仓库包 wget https://dev.mysql.com/get/mysql80-community-release-el7-5.noarch.rpm # 安装Yum仓库包 sudo rpm -ivh mysql80-community-release-el7-5.noarch.rpm2. 启…...

编程日记 2025/8/16 10:00:48

几种常见的虚拟环境工具（Virtualenv、Conda、System Interpreter、Pipenv、Poetry）的区别和特点总结

在 PyCharm 中创建虚拟环境是一个非常直接的过程，可以帮助你管理项目依赖，确保不同项目之间的依赖不会冲突。通过 PyCharm 创建虚拟环境打开 PyCharm 并选择或创建一个项目。打开项目设置： 在 Windows/Linux 上，可以通过点击…...

编程日记 2025/8/20 11:24:33

VScode：运行程序停止后，频繁出现终端进程被终止

VScode里面powershell被迫关闭 bug场景排查原因解决办法 bug场景系统：Windows IDE：Visual Studio Code 停止运行程序后，按向上箭头想要执行上一步命令，忽然终端页面强行关闭，并报错如下： 终端进程 &quo…...

编程日记 2025/8/16 9:53:50

PHP框架加载不上.env文件中的变量

以lumen5.5框架为例，根目录中bootstrap文件夹下的app.php文件中 (new Dotenv\Dotenv(__DIR__./../))->load(); 是读取所有.env中的文件的，这个是正常的，但是在代码中的任何位置或者在config目录下的databases.php里，代码如…...

编程日记 2025/8/19 10:07:52

Linux：基本指令与内涵理解

1.文件操作指令 1.1 ls ls指令用于查看指定层级文件夹下的文件或文件夹基本格式：ls (选项) (查看层级） 其中选项处不写就默认是显示文件名，查看层级默认是当前层级选项1： -l 作用：将查找文件的详细信息显示出来我们…...

编程日记 2025/8/17 19:50:44

C++设计模式-抽象工厂模式：从原理、适用场景、使用方法，常见问题和解决方案深度解析

一、模式基本概念 1.1 定义与核心思想抽象工厂模式（Abstract Factory Pattern）是创建型设计模式的集大成者，它通过提供统一的接口来创建多个相互关联或依赖的对象族，而无需指定具体类。其核心思想体现在两个维度： …...

编程日记 2025/8/21 2:53:16

LINUX系统安装+添加共享目录

一、前言 Windows或mac系统中创建Linux工作环境是基于VMware和SL(Scientific Linux)，下面分别安装二者。二、VMware软件安装及注册 1、双击VMware安装包 2、点击下一步 3、勾选接受许可，并点击下一步 4、更改路径（建议更改为容易找到的路…...

编程日记 2025/8/21 2:45:38

《UE5_C++多人TPS完整教程》学习笔记34 ——《P35 网络角色（Network Role）》

本文为B站系列教学视频《UE5_C多人TPS完整教程》 —— 《P35 网络角色（Network Role）》的学习笔记，该系列教学视频为计算机工程师、程序员、游戏开发者、作家（Engineer, Programmer, Game Developer, Author） Stephe…...

编程日记 2025/8/16 9:55:36

成为git砖家(9): rebase进阶: 拆分commit为多个

问题描述当一次性 git add 了多个修改点， 并且快速的执行了 git commit 后， 你觉得有点懊恼： 明明可以独立为两次或多次 commit， 揉在一块导致历史记录不太清晰。比如我在 nn1 这个练手项目中， 最近一次 commit&am…...

编程日记 2025/8/20 13:41:26

pytorch retain_grad vs requires_grad

requires_grad大家都挺熟悉的，因此穿插在retain_grad的例子里进行捎带讲解就行。下面看一个代码片段： import torch# 创建一个标量 tensor，并开启梯度计算 x torch.tensor(2.0, requires_gradTrue)# 中间计算：y 依赖于 x&#x…...

编程日记 2025/8/18 12:58:48

Axure常用变量及使用方法详解

点击下载《Axure常用变量及使用方法详解.pdf》摘要 Axure RP 作为一款领先的前端原型设计工具，提供了全面的变量和函数系统，以支持复杂的交互设计和动态内容展示。本文将从专业角度详细解析 Axure 中的全局变量、中继器数据集变量/函数、元件变量…...

编程日记 2025/8/21 2:53:27

为企业级AI交互系统OpenWebUI集成LDAP用户权限认证（2）

为企业级AI交互系统OpenWebUI集成LDAP用户权限认证（2）本文介绍如何OpenWebUI系统集成LDAP认证服务，及其用户权限及用户组设置。推荐超级课程：本地离线DeepSeek AI方案部署实战教程【完全版】Docker快速入门到精通Kubernetes入门到大师通关课AWS云服务快速入门实战目录…...

编程日记 2025/8/20 17:22:19

mac 被禁用docker ui后，如何使用lima虚拟机启动docker

本机macos 安装lima brew install lima创建配置 echo "\\ndynamic:\n big-sur:\n image: docker://docker:git\n linux:\n image: docker.io/limasoftware/ubuntu:20.04 \\n" > ~/.lima/default.yaml启动名叫default的虚拟机 limactl start default进…...

编程日记 2025/8/20 14:57:31

C#实现AES-CBC加密工具类（含完整源码及使用教程）

一、AES-CBC加密应用场景 AES（Advanced Encryption Standard）作为全球公认的安全加密标准，广泛使用在以下场景： API通信加密：保护HTTP接口传输的敏感数据（如身份令牌、支付信息）文件安全存储&…...

编程日记 2025/8/20 4:52:22

Unity辅助工具_头部与svn

Unity调用者按钮增加PlaySideButton using QQu; using UnityEditor; using UnityEngine; [InitializeOnLoad] public class PlaySideButton {static PlaySideButton(){UnityEditorToolbar.RightToolbarGUI.Add(OnRightToolbarGUI);UnityEditorToolbar.LeftToolbarGUI.Add(OnLe…...

编程日记 2025/8/16 12:00:53

1.第一种方式：通过缩放1px的线条实现视觉上的0.5px效果，兼容性较好。

2.第二种方式：直接使用0.5px边框（现代浏览器）

3.第三种方式：使用transform缩放（推荐） 结合媒体查询（适配高分辨率屏幕）

4.第四种方式：线性渐变：创建极细渐变模拟线条，适合简单场景。

5.第五种方式：​box-shadow：利用微小阴影模拟线条。

相关文章：

3.第三种方式：使用transform缩放（推荐）结合媒体查询（适配高分辨率屏幕）

5.第五种方式：box-shadow：利用微小阴影模拟线条。