CSS 边框虚线 dotted 与 dashed 的区别及跨浏览器渲染差异
在 CSS 边框样式中，dotted 与 dashed 都常被泛称为“虚线”，但两者的几何形态与规范定义截然不同。本文解析两者在现代浏览器中的标准表现。 一、 核心几何差异 * dashed（破折线/长虚线）： 由一系列等间距的短矩形线段组成； * dotted（圆点线/点状线）： 在 W3C 标准中定义为由一系列圆点（Dots）组成。…
#Web前端
Web前端
17 articles tagged
热门标签
Articles in this tag
CSS3 animation-fill-mode 动画保持结束状态：forwards 详解
在编写 CSS3 关键帧动画（@keyframes）时，很多开发者发现元素播放完淡入（fade-in）或位移动画后，会瞬间闪退回初始的原生状态。通过配置 animation-fill-mode: forwards; 即可让元素完美定格在最后一帧。 一、 核心参数取值 * none（默认）：动画播放前后都不应用关键帧中的任何样式； * forwards（最常用）： 动画结束后，…
Flexbox 弹性盒布局之 align-self 属性：单元素独立交叉轴对齐控制
在 Flexbox 布局中，父容器上的 align-items 会统一约束所有子元素在交叉轴（垂直方向）的对齐方式。而通过给特定子项设置 align-self，可以单独覆盖父级规则，实现精细对齐定制。 一、 核心取值与效果 .parent { display: flex; align-items: center; /* 默认所有子项垂直居中 */ } .special-…
CSS3 linear-gradient 线性渐变用法详解：方向、角度与多色标
linear-gradient 是现代 Web 页面背景、卡片高光与按钮拟物渐变最常用的 CSS 函数。本文系统梳理方向关键词、旋转角度与多色标位置控制。 一、 常用方向与角度语法 /* 1. 经典双色对角渐变（从左上到右下） */ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* 2.…
CSS 浏览器私有前缀（-webkit-、-moz-、-ms-）全景科普与现状
在 CSS 代码中常见的 -webkit-、-moz-、-ms-、-o- 被称为浏览器厂商私有前缀（Vendor Prefixes）。本文总结各自代表的浏览器引擎及现代自动化处理建议。 一、 前缀与内核对应表 * -webkit-：基于 WebKit / Blink 内核（Chrome、Safari、Edge、绝大多数移动端浏览器）； * -moz-：基于…
Web 前端常用特殊字符与 HTML 实体代码速查大全
在 HTML 编写中，某些保留字符（如 <、>、&）若直接书写会被浏览器解析为标签，或者连续空格会被合并。使用标准的 HTML 字符实体（HTML Entities） 可以确保字符准确安全渲染。 一、 最常用核心字符实体表 字符 实体名称（Entity Name） 实体编号（Number）…
彻底解决 CSS 的居中问题：现代 Web 水平垂直居中全景方案
“如何用 CSS 实现居中”是前端开发中最经典的话题。从早期的 text-align: center、margin: auto，到如今主流的 Flexbox 与 CSS Grid，居中方案经历了一场技术演进。本文为您梳理最优雅、兼顾现代标准与传统场景的居中方案。 一、 现代首选：Flexbox 弹性盒居中（强烈推荐） 无论子元素是文本、…