CSS 核心技术这个系列写到了第五篇。前面几篇聊过盒模型、布局、伪类、响应式这些地基这一篇我换个思路专门把大家在搜索框里问得最多、但单个答案又特别零散的 CSS 问题集中拆一遍涟漪光圈扩散怎么做、字体渐变怎么写、图片和文字怎么排成一行、外部 CSS 文件里能不能写 style 标签、屏幕穿出效果真能用 CSS 做出来吗。无论你是正在整理 HTML 与 CSS 笔记的初学者还是平时写业务样式的开发者这篇文章更像是一份查漏补缺的操作笔记每段都有可以直接复制的代码和背后的原理。我会把选显卡这类判断也说清楚免得你复制过去只会改颜色换个场景就不知道怎么套。1. 选择器进阶从元素选择器到原子性 CSS1.1 元素选择器最基础也最容易忽略优先级很多新手教程把元素选择器放在第一关是有道理的p、span、div、a这些都是最朴素的标签选择器写法简单作用范围也直白选中的是页面上所有同类标签。但它也是特异性最低的一类选择器一旦和类、ID 起了冲突大概率会被覆盖。举个例子下面这段代码p { color: #333; } .text { color: #f66; }p classtext这段文字会显示红色/p最后文字会变成红色因为.text的优先级是 (0,1,0)而p是 (0,0,1)类选择器更高。看起来很简单但实际项目里最容易翻车的场景是重置样式里写了p { margin: 0 }页面里某个组件又给p加了类来控制间距结果间距怎么调都不生效十有八九就是特异性压不过重置样式。我的建议是元素选择器适合做全局底座比如body字体、a的默认颜色、ul的清理但业务样式尽量别裸用元素选择器。真要限定范围就写成.article p这种后代选择器让作用域清晰一点。还有一个进阶技巧是:where()它能把选择器特异性归零比如:where(.card) p { ... }可以让里面的p不再因为元素选择器而干扰其他规则非常适合用来写兜底样式。1.2 原子性 CSS类名即样式重构思路完全不一样再说说原子性 CSS这个热词这两年出现频率极高。它的核心思路是一个类只做一件极小的事text-center就是居中mt-4就是上边距 16pxflex就是 flex 布局。你不再写这个组件负责什么的语义类名而是直接在 HTML 里堆工具类。听起来很反直觉但实际开发里它解决了一个大痛点传统 CSS 的类名冲突和职责纠缠。两个开发者分别写了.info一个用在用户卡片一个用在订单状态最后样式互相污染。原子性 CSS 不存在这个问题因为每个类都是原子级的它的样式几乎不会依赖上下文。div classflex items-center justify-between p-4 span classtext-base font-bold标题/span button classpx-3 py-1 rounded bg-blue-500 text-white按钮/button /div这套组合最后得到的是一个典型的左右布局 卡片风格区块。优点很突出样式确定、可复用性高、打包体积小。缺点也明显HTML 里 class 很长肉眼读起来累如果团队不维护一套命名规范很容易变成看得懂每个类但看不懂整块结构。我实际用的方式是混合策略页面级布局和核心组件用语义化类名保证可读性间距、字号、颜色这类细颗粒度的样式用原子类减少重复的 CSS 声明。像 Tailwind 这类框架做的就是原子化 CSS 的工程化但它不是唯一答案你自己维护一套.mt-1、.mt-2的短类也完全可以。2. 样式组织与引入方式别再纠结 style 标签了2.1 三种引入方式怎么选CSS 引入方式是个老生常谈的话题但外部 CSS 文件需不需要写 style这个问题每天都有人问。我先给结论外部.css文件里完全不需要写style甚至写了反而会出大问题。外部样式表link relstylesheet hrefstyle.css放在head里。推荐绝大多数场景用它因为可以被浏览器缓存多个页面共用一份样式加载效率最高。内部样式表style写在 HTML 的head里。适合单页应用的首屏关键样式比如登录页、活动页不想额外多一个请求。行内样式stylecolor: red直接写在标签上。优先级最高能覆盖外部和内部样式但它无法复用也会让 HTML 变得臃肿通常只有在 JS 动态改样式时才值得用。还有一种import写在 CSS 文件顶部用来引入另一个 CSS 文件。我不建议把它当作常规手段因为import会串行加载后面的样式要等被引入的样式下载完才能继续性能上比link的并行加载差不少。除非你在写一个给团队内部用的主题包否则尽量少用。2.2 外部 CSS 文件的正确写法接着上面那个问题展开。很多新手第一次创建.css文件会本能地写成这样style .btn { background: #3b82f6; color: #fff; } /style然后把它保存成style.css引入页面结果样式全部失效。原因很简单CSS 文件里解析的是选择器 声明块的结构style会被当成一个未知的标签选择器后面的规则自然全乱。正确的文件内容应该是.btn { background: #3b82f6; color: #fff; border-radius: 6px; }HTML 那边只需要link relstylesheet hrefstyle.css我见过不止一次因为这个问题折腾大半天的求助帖其实只要记住一句话.css文件本身就是样式表不需要再套 HTML 标签。 另外补一个性能细节首屏关键 CSS 可以用link relpreload asstyle hrefstyle.css提前下载onload 后再切换成正式的 stylesheet这样能略微提升加载速度副作用是可能会有样式闪烁适合对性能较真的场景。3. 文本与控制一行对齐、字体渐变、删除线与 em3.1 容器里文本位置怎么调怎么调整 CSS 容器里的文本位置这个问题本质上是在问水平对齐和垂直对齐两个方向。水平方向最简单.box { text-align: center; /* 或者 left / right */ }垂直方向就容易踩坑了。很多人一开始知道line-height等于容器高度可以让单行文本垂直居中于是写成.box { height: 60px; line-height: 60px; }这个技巧只对单行文本有效。一旦文本换行成两行行高依然等于 60px第二行会被挤到容器外面或者看起来整体往下坠。更通用的做法是用 flex 或 grid.box { display: flex; align-items: center; /* 垂直居中 */ justify-content: center; /* 水平居中 */ }这样不管文本是一行还是三行都能保持居中。还有一种场景是绝对定位居中常见于弹窗、角标.box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }这里的translate(-50%, -50%)是相对元素自身尺寸的百分比所以能在不知道宽高的情况下居中。顺带说一句line-height会继承如果你在父容器设了较大的行高子元素没有显式覆盖会发现文本间距变得怪怪的这个细节排查时很容易被忽略。3.2 图片和文字排在一行的几种方法图片和文字一行 CSS也是搜索高频词。最基础的解法是靠vertical-align: middleimg srcicon.png classicon 登录.icon { vertical-align: middle; }vertical-align控制的是行内元素在行框里的对齐方式middle 可以让图片大致居中于文字。但它受基线影响有时候偏上偏下差一两个像素需要在不同浏览器里微调。我要推荐的其实是 flex.info { display: flex; align-items: center; gap: 8px; }align-items: center会把图片和文字统统按交叉轴居中行为稳定还顺手解决了两个问题一是图片和文字之间不用手动加空格用gap更可控二是多个图标、多行文字混排时不会乱。再提一个老坑inline-block元素之间如果 HTML 里有换行会出现一个几像素的空白。很多人发现两个图标中间总是有空隙就是换行符成了空白字符父容器设font-size: 0或者改成 flex 布局都能解决。3.3 字体渐变一条 background-clip 的事字体渐变是个很能提升页面质感的技巧而且实现起来比你想象中简单。核心原理是把文字颜色设成透明再把背景图裁剪到文字的笔画之内。.gradient-text { background: linear-gradient(90deg, #ff6a88, #ff99ac, #4facfe); -webkit-background-clip: text; background-clip: text; color: transparent; }background-clip: text的意思是把背景限制在文字的可视区域color: transparent让原本的文字颜色透明于是露出来的就是背景渐变色。注意兼容性写法-webkit-background-clip: text仍然需要保留否则部分基于 WebKit 内核的浏览器会失效。我之前见过有人写了渐变文字之后发现背景色整个铺满了盒子原因是在这个元素上又叠加了其他背景属性或者忘记设color: transparent。还有一点如果元素本身需要背景色尽量放到父容器或者伪元素上去避免和这个文字背景互相干扰。渐变方向、颜色节点都可以随意调想做成动态流光效果就用background-size: 200%加一个背景位置变化的动画代码也不复杂。3.4 删除线的正确打开方式删除线在 CSS 里叫text-decoration: line-through。写法很简单.del { text-decoration: line-through; }但这里有两个层级的问题。第一是 HTML 语义如果是一段已经被删除的内容应该用del标签如果是一段不再正确但保留展示的内容用s标签。纯装饰性的删除线才只加 CSS。第二是样式的精细控制现代 CSS 已经支持text-decoration-color、text-decoration-thickness和text-decoration-style.del { text-decoration: line-through; text-decoration-color: #f60; text-decoration-thickness: 2px; text-decoration-style: wavy; }能组合出不同颜色的波浪删除线。还有一个容易被忽略的属性是text-decoration-skip-ink默认是 auto也就是说删除线经过字母时会稍微断开避免穿到笔画上影响可读性。如果不想要这种断开效果再显式设成none就行。另外给a标签去掉下划线用的是text-decoration: none但注意别把 focus 态的下划线也去掉键盘导航用户可以靠它感知焦点位置。3.5 em 单位一个被忽略又让人头疼的相对单位em是相对单位但它的相对基准需要理清楚。常规情况下1em等于当前元素的font-size。这句话听起来简单实际坑在继承如果父元素的font-size是 20px子元素写font-size: 1.2em那子元素实际是 24px如果孙元素再写1.2em它会相对子元素的 24px 算得到 28.8px。嵌套层级一多字号就越叠越大这是 em 最经典的翻车现场。.parent { font-size: 20px; } .child { font-size: 1.2em; } /* 24px */ .grandchild { font-size: 1.2em; } /* 28.8px */和 em 对比明显的是rem它始终相对根元素html的font-size不存在嵌套累计问题。那 em 是不是就该被抛弃也不是。em 有个很实用的场景做与当前字号联动的内边距。比如按钮我经常这样写.btn { font-size: 16px; padding: 0.6em 1.2em; }以后如果想放大按钮只需要改font-size内边距会跟着等比例放大不用再单独调。这就是利用 em相对当前字号的特性做整体缩放。团队里最好约定一个基准根字号固定为 16px使用 rem 控制全局间距和尺寸只在按钮、组件内部用 em 做等比缩放这样既能享受弹性又不会失控。4. 动效专题涟漪、流光、数字动画与倒计时4.1 涟漪光圈扩散怎么实现涟漪光圈扩散常见于按钮点击反馈、加载提示、地图定位标记。它的核心思路是基于伪元素做一组scale放大加opacity淡出的动画。.ripple-btn { position: relative; overflow: hidden; } .ripple-btn::after { content: ; position: absolute; inset: 0; border-radius: inherit; border: 2px solid rgba(255, 255, 255, 0.8); animation: ripple 1.5s ease-out infinite; } keyframes ripple { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(2); opacity: 0; } }这里有几个关键点。一是position: absolute的inset: 0让伪元素覆盖整个按钮border-radius: inherit继承按钮本身的圆角光圈才能贴合形状。二是动画里的transform: scale默认是围绕元素中心放大所以光圈会从中间向外扩散。三是按钮上加了overflow: hidden否则光圈放大后会溢出按钮边界但如果你想要的是光波冲出按钮的效果就不要加这个属性。如果要做出多圈涟漪比如雷达那种连续波纹不能只靠一个伪元素。可以用两个子元素分别承载动画用animation-delay把第二圈错开半拍视觉效果就是多层波浪。如果做点击跟随的涟漪通常要配合 JS 在点击位置动态插入一个元素再让这个元素播放从 0 到 1 的缩放动画纯 CSS 只能做固定位置的连续波纹。区分清楚这两种涟漪需求就不会做反。4.2 流光边框是怎么来的流光边框现在也常见尤其是卡片、按钮、活动入口。实现的思路很多我推荐一种兼容性和效果都比较好的方案外层用渐变背景模拟边框内层再用实色遮住中心区域。property --angle { syntax: angle; initial-value: 0deg; inherits: false; } .glow-card { border-radius: 16px; padding: 1px; background: conic-gradient( from var(--angle), #f97316, #ec4899, #8b5cf6, #f97316 ); animation: rotate-angle 3s linear infinite; } .glow-card .inner { border-radius: 15px; background: #111; padding: 16px; }原理是外层元素背景使用conic-gradient画一圈渐变色padding: 1px让渐变只能露出边框宽度的一圈内层元素使用接近页面背景的深色把中间盖住最终只看到外层渐变形成的彩色描边。property --angle注册了自定义属性动画里不断把角度从 0deg 转到 360deg边框颜色就会旋转起来。property的兼容性需要留意较老的浏览器不支持自定义属性动画。保险做法是先给一个静态的 conic-gradient 边框在支持property的浏览器里再叠加旋转动画。这样老用户看到的是静态彩边新用户看到的是流光体验降级不会太突兀。4.3 数字加载动画与 CSSJS 倒计时数字加载动画效果和JS CSS 倒计时其实是一类问题数字的呈现由 CSS 负责数字的变化由 JS 负责。先说一个最经典的环形进度例子。SVG 里的圆用stroke-dasharray控制虚线的长度stroke-dashoffset控制偏移量配合 CSS transition 就能做进度增长svg classring viewBox0 0 100 100 circle classring-bg cx50 cy50 r40/circle circle classring-fg cx50 cy50 r40/circle /svg span classring-num idringNum75%/span.ring { width: 120px; height: 120px; transform: rotate(-90deg); } .ring-fg { fill: none; stroke: #f97316; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 251.2; stroke-dashoffset: 62.8; transition: stroke-dashoffset 0.3s ease; }圆周长约为 2 × π × 40 ≈ 251.2。75% 的进度意味着保留 75% 的弧长所以偏移量是 251.2 × 25% ≈ 62.8。JS 只需要更新stroke-dashoffset的值const ring document.querySelector(.ring-fg); const num document.getElementById(ringNum); let progress 0; const timer setInterval(() { progress 1; const offset 251.2 * (1 - progress / 100); ring.style.strokeDashoffset offset; num.textContent progress %; if (progress 100) clearInterval(timer); }, 30);倒计时的典型写法也类似区别是每次减少total并把数字直接写入元素文本let total 10; const countEl document.getElementById(count); countEl.textContent total; const timer setInterval(() { total--; countEl.textContent total; countEl.classList.remove(pop); void countEl.offsetWidth; countEl.classList.add(pop); if (total 0) clearInterval(timer); }, 1000);.pop { animation: count-pop 0.4s ease; } keyframes count-pop { 0% { transform: translateY(12px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }这里有一个非常实用的经验想让同一个元素重新播放 CSS 动画最稳的方式是先移除动画类强制触发一次 reflow再重新添加。void countEl.offsetWidth这一行的目的就是强制浏览器重新计算布局否则下一次 setInterval 里添加的类不会重新触发动画。4.4 鼠标移入事件不只 hoverCSS 里的鼠标移入效果绝大多数情况下用的是:hover。但 :hover 其实不是事件而是伪类它描述的是用户正在指向这个元素的状态。它能做到的事件效果比很多人以为的多.item:hover .child { opacity: 1; transform: translateY(0); } .item:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); }上面这段可以在鼠标移入.item时同时改变自己的阴影和子元素的样式。还有两个经常被忽略的选择器:focus-within和:focus-visible。:focus-within表示元素本身或它内部的任意元素获得焦点非常适合做卡片高亮只要卡片里有输入框被聚焦整张卡片都会变化.card:focus-within { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3); }:focus-visible则表示键盘导航产生的焦点可以用它只保留键盘用户的焦点样式而不让鼠标点击后留下难看的选中框。还有一个移动端注意事项:hover在触摸屏上会有粘住的问题手指点上去后样式不消失。最好用media (hover: hover)包裹仅在支持悬停的设备上生效的效果media (hover: hover) { .item:hover { transform: translateY(-2px); } }5. 进阶视觉效果屏幕穿出、3D 空间与游戏化布局5.1 屏幕穿出效果能实现吗CSS 能实现屏幕穿出来的效果吗答案是能而且不需要很复杂的逻辑。核心是 3D transform 里的透视与纵深父元素加perspective子元素加translateZ正值会让子元素朝观察者方向靠近视觉上就像从屏幕里顶出来。.scene { perspective: 600px; } .card { transform: translateZ(120px); }perspective的值越小透视越强烈物体放大感越明显。如果把translateZ设得够大再加上卡片原本的尺寸它会显著超出父容器边界配合overflow: visible就会产生一种溢出屏幕的感觉。限制它的边界时可以给.scene加overflow: hidden把边缘切成屏幕框视觉效果更像从窗口里伸出来。还有一种更常用的穿出屏幕动画是滑入滑出元素平时transform: translateX(120%)隐藏在右侧屏幕之外进入视图时用过渡动画滑进屏幕。这种交互在侧边抽屉、消息提示、购物车浮层里大量出现。我自己的体会是CSS 的transform是比top/left更优秀的位移方案因为transform的变化通常只在合成层完成不会触发重排但如果位移量很大且元素内部有复杂文字可能会看到字体模糊适当用translateZ(0)强制开启 GPU 层能缓解也不能滥用层过多内存会涨。5.2 从植物大战僵尸看游戏界面的 CSS 布局很多人搜植物大战僵尸 HTML 完整代码其实这个需求背后考验的是用 HTMLCSSJS 搭一个固定画布的游戏界面比如宽 1440px、高 810px。游戏界面和普通网页有区别它更接近舞台所有元素需要摆到精确位置还需要随着窗口缩放整体适配。一个常用的技巧是把整个游戏当作固定尺寸的画布通过transform: scale等比缩放.game { width: 1440px; height: 810px; transform-origin: top left; transform: scale(calc(100vw / 1440)); }这样游戏画布始终保持 1440:810 的比例缩放时左上角对齐右侧和下方会留出空间。更完整的做法是根据窗口宽高同时计算缩放比例取较小值再配合 JS 监听 resize。真正搭建页面时草坪可以用 CSS Grid 排成 9 行 5 列卡片栏用 flex 排列阳光数、血量条用绝对定位放在固定位置僵尸的移动和攻击动画再补上keyframes。说到底这类项目没有某个万能 CSS 魔法它靠的仍然是网格、定位、动画和变换这几样基础能力组合起来。6. 高频问题速查与排查经验6.1 常见问题速查表我把日常答疑里碰到的最高频问题整理成了一张速查表方便直接对号入座。问题原因快速解法外部 CSS 文件里写了style样式全乱CSS 文件不需要 style 包裹去掉style直接写选择器和声明块渐变文字只显示底色看不出渐变没设background-clip: text或color: transparent补齐两个属性图片跟文字底部总差一条线基线对齐导致用vertical-align: middle更稳的是 flexem 套在嵌套结构里越来越大em 相对当前元素字体大小会累加把全局尺寸改成 rem只在组件内部用 emhover 时元素跳变没有平滑过渡忘了加transition给要变化的属性加transition动画循环结束后会突然跳回起点首尾关键帧状态不一致让 0% 和 100% 状态一致或使用alternate展开查看详情高度不自然max-height估算不准用grid-template-rows: 0fr → 1fr过渡多行文本垂直居中失效line-height等于容器高度只适合单行改用 flex align-items: center6.2 查看详情 CSS 的两种可靠写法在文章末尾或者两行中的最后展示查看详情通常指的是展开折叠区域。我推荐两种可靠实现。第一种是原生details语义好自带展开和收起details classinfos summary查看详情/summary div classinfos-body这里是展开后显示的内容。/div /details.infos summary { list-style: none; cursor: pointer; } .infos summary::-webkit-details-marker { display: none; } .infos[open] .infos-body { animation: unfold 0.3s ease; } keyframes unfold { from { transform: translateY(-8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }第二种是基于 checkbox 和 grid 过渡的写法。它的优势是展开高度可以完全自适应不需要估算max-height。现在的浏览器对grid-template-rows: 0fr转1fr的过渡支持已经很好可以放心用input typecheckbox idmore classmore-input label formore classmore-btn查看详情/label div classmore-content div classmore-inner 这里是展开后显示的内容。 /div /div.more-input { display: none; } .more-content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; } .more-content .more-inner { overflow: hidden; } .more-input:checked ~ .more-content { grid-template-rows: 1fr; } .more-input:checked ~ .more-btn { color: #f60; }这个方案还方便控制展开箭头:checked配上兄弟选择器可以让右侧的图标旋转 180 度。如果你需要高度动画又不想依赖 JS 测量这个写法是首选。6.3 实战排查经验最后分享几条我自己排查 CSS 问题时的习惯。遇到样式不对我几乎不会只看代码而是先打开 DevTools 的 Elements 面板选中目标元素看盒模型和 Computed 样式。Computed 面板会列出每一条生效的声明来自哪条规则一眼就能看出是不是被别的更高优先级规则覆盖了。如果 hover 效果不触发先检查元素是不是真的被鼠标指到了有时候是被一个透明的兄弟元素盖住了给覆盖层加上pointer-events: none就能穿透。如果动画卡顿优先检查是不是动了width、top、box-shadow这些容易引发重绘或重排的属性换成transform和opacity通常能改善。我自己还有一个习惯把颜色、间距、圆角、阴影都定义成 CSS 变量集中在:root里管理。:root { --color-primary: #f60; --space-md: 16px; --radius-lg: 12px; }这样配合原子性 CSS 使用很舒服改主题只需要改变量其他地方的间距和颜色会自动跟着变排查问题时也比散落的魔法数字清晰得多。写 CSS 五篇之后我最大的体会是CSS 不是一门需要把所有 API 背下来的语言但你必须理解它背后的层叠、继承和渲染机制。 很多看起来玄学的问题比如 em 越套越大、文字对不齐、动画突然跳动根源通常都落在两个地方——有没有搞清楚这个属性的继承链以及有没有无意间触发重排或重绘。每次排查只要往这两个方向想至少能解决八成问题。后面如果有时间我打算把 CSS 工程化和构建相关的内容单独整理一篇到时候再和大家继续聊。