VS Code 使用 Autoprefixer 插件给样式自动添加浏览器所需前缀
在编写现代 CSS 时，为了确保 flexbox、grid、transform 或 user-select 等特性在各大浏览器（WebKit、Gecko、Blink）中兼容良好，手动编写 -webkit-、-moz-、-ms- 前缀极其繁琐且易漏。通过 VS Code 的…
#Web前端
Web前端
17 articles tagged
热门标签
Articles in this tag
Less 编译 CSS3 calc() 函数被提前计算为错误数值的解决方案
在编写 CSS 时，我们常用 calc(100% - 80px) 来动态计算容器宽度。但在使用 Less 预处理器编译时，Less 会误将减号当作自身的数学减法运算，强行输出为错误的 calc(20%)，导致前端布局彻底崩溃。本文介绍两种标准规避方案。 一、 方案一：使用 Less 转义语法（~"…
CSS calc() 函数动态计算长度值详解与使用避坑指南
calc() 是现代 CSS 中极其强大的动态数学计算函数。它允许开发者在 CSS 属性中混合使用不同的长度单位（如百分比 %、视口单位 vh/vw 与绝对像素 px），在无需 JavaScript 介入的情况下实现流畅的自适应弹性布局。 一、 核心语法与经典应用场景 /* 混合百分比与固定像素：自适应侧边栏与主内容区 */ .main-wrapper { width: calc(…
CSS 轮廓属性 outline 与边框 border 的本质区别与最佳实践
在进行 Web UI 样式开发时，outline（轮廓）与 border（边框）在视觉上都可以为元素添加外围线框。但两者的盒模型计算机制与无障碍规范有着根本性的差异。本文解析两者的核心区别与选型场景。 一、 outline 与 border 的三大核心区别 对比维度 边框（border） 轮廓（outline） 是否占据盒模型空间 ✅ 占据空间，…
现代 CSS 颜色体系：彻底掌握 HSL 与 HSLA 色彩模型
在 Web 开发中，相比于十六进制（#3498db）和 RGB（rgb(52, 152, 219)），HSL（色相、饱和度、亮度） 是最符合人类直觉与设计系统变量构建的色彩模型。本文介绍 HSL 的核心参数与主题配色应用。 一、 HSL 三要素解析 * H（Hue…
Web 无障碍开发：深入理解图标 aria-hidden="true" 的必要性
在现代前端 UI 库（FontAwesome、Lucide、Ant Design）的代码中，字体图标与 SVG 标签上普遍包含 aria-hidden="true"。本文解释该属性对于屏幕阅读器（Screen Readers）与盲人用户无障碍访问的关键价值。 一、 为什么纯装饰性图标必须隐藏？ 视障用户依赖屏幕朗读软件（如…
CSS 实现中文段落首行缩进 2 个字符的标准解法：text-indent: 2em
在中文文章排版中，按照传统排版规范，每个自然段开头需要缩进两个汉字字符。本文介绍使用 CSS 相对长度单位 em 实现完美首行自适应缩进的标准方案。 一、 标准 CSS 规则 p { text-indent: 2em; /* 1em 代表当前文字字体大小的宽度，2em 永远精准缩进 2 个中文字符 */ } 二、 避坑点：…
CSS3 @keyframes 实现手机桌面 App 图标编辑状态抖动效果
在 Web 端模拟 iOS / Android 手机桌面长按进入编辑状态时图标轻微左右晃动的动画质感，仅需纯 CSS3 的 @keyframes 与 transform: rotate() 即可丝滑实现。 一、 核心 CSS 动效代码 @keyframes shake-icon { 0% { transform: rotate(…
CSS3 background-size 属性完全指南：cover、contain 与自适应适配
在响应式网页设计中，背景图片的处理直接决定了首屏视觉质感。background-size 彻底解决了以往背景图被裁切或拉伸变形的痛点。本文解析其各个取值的核心表现。 一、 常用取值与表现行为 * background-size: cover;（全屏铺满）：等比例缩放图片，直至完全覆盖容器的所有区域，超出部分会被裁剪，确保绝不留白； * background-size: contain;（完整容纳）：等比例缩放图片，直至完整显示在容器内，适合展示 Logo…
纯 CSS 利用 border 边框透明原理绘制任意方向三角形
在前端制作气泡提示（Tooltip）箭头、下拉菜单指示角标或角标徽章时，无需加载任何图片或图标字体，利用 CSS 盒模型中边框相交的斜切机制即可纯代码实现极速渲染。 一、 核心原理：宽高为 0 + 透明边框 .triangle-up { width: 0; height: 0; /* 左右边框透明，底边有颜色即可形成向上三角形 */ border-left: 10px…