拓冰网站定制 
如果你写过几年前端大概率会有类似的感受CSS3不是“多会几个新属性”那么简单它把整个CSS的设计逻辑重新换了一遍。我最早意识到这件事是接手一个老商城页面做重构光是一个圆角按钮就要切背景图、做PNG阴影而旁边同时期的项目用border-radius和box-shadow三行就解决了。后来我系统地过了一遍CSS3里那些“基础能力”才发现真正值钱的不是那几行代码而是背后那套“描述页面表现”的心智模型。所以这篇文章不打算按文档目录把CSS3的所有属性罗列一遍而是把真正决定你水平的地基拆开讲选择器、布局、绘制、动效、响应式。每个方向都会配上可以直接复用的代码场景和踩坑经验不管你刚入门还是写了几年CSS但经常觉得“会又不会”都应该能从里面找到点东西。1. 先理解这套规范为什么叫“CSS3”1.1 版本简史从CSS2.1到模块化时代很多人以为CSS3是“CSS2之后的下一个版本”其实并不严谨。CSS2在1998年发布之后因为浏览器厂商各自为政标准一度停滞真正的CSS2.1直到2011年才彻底完成标准化。你去看老教程里经常出现的float布局、position: absolute定位、clearfix这些内容基本都是CSS2.1时期的技术。从CSS3开始W3C换了个思路不再等一个大版本统一推出而是把CSS拆成一个个独立的模块每个模块单独推进、单独定稿。所以严格来说并不存在一份叫“CSS3标准”的文档我们平时说的CSS3更像是一个时代的代称它涵盖了几十上百个模块。比如Flexbox是一个模块Grid是另一个模块CSS变量又是一个模块它们各自成熟的时间差了好几年浏览器支持情况也不一样。阶段关键特性典型问题CSS1字体、颜色、背景、基础文本样式页面只能靠表格布局CSS2定位、浮动、z-index、媒体类型浮动清浮动很痛苦响应式几乎为零模块化时代Flexbox、Grid、动画、滤镜、变量、容器查询特性非常多需要按模块学这个认知最大的实际用途就是查兼容性。不要搜“CSS3”要搜具体的“CSS Grid”“backdrop-filter”“:has()”用caniuse查具体模块的支持情况。你知道了这一点遇到任何新特性心里都有底它不是“CSS3里有没有”而是“当前目标浏览器支不支持这个模块”。1.2 所谓的“基础”到底指什么说到“CSS3基础”很多人第一反应是“入门教程”。我自己带过人之后越来越觉得“基础”这个词被误解了。CSS里真正的基础不是记住多少属性而是那些决定一切表现层表达的地基性概念盒模型、层叠、优先级、包含块、格式化上下文BFC。CSS3的很多新特性本质上都是在这些地基之上做优化。举个最简单的例子。display: flex看起来很神奇但如果你不理解“主轴”和“交叉轴”不理解的align-items默认值是stretch而不是center那你做出来的导航栏总会莫名其妙地被拉伸。再比如你学了position: sticky却不知道为什么偶尔失效那是因为你没有意识到它依赖于包含块的高度。所以这篇内容不会只列属性我会把每个知识点背后的逻辑讲清楚因为“基础”这个词真正值钱的地方是底层逻辑能复用到任何新特性上。2. 选择器语言真正意义上“用CSS选人”的能力CSS每条规则都在做两件事选中目标声明表现。很多人的问题不是不知道有多少种属性而是不知道怎么精准地选到想改的那个元素。CSS2时代基本靠class和id打天下于是产生了“类名地狱”一个元素上挂五六个class语义模糊还经常互相覆盖。CSS3的强化选择器体系本意是让你少写class、按结构或属性去匹配但很多人没意识到这一点。2.1 属性选择器从“看class”到“看属性”属性选择器可以按元素的属性来选语法很灵活。常见的有这些用法/* 以什么开头 */ a[href^http]::after { content: ↗; } /* 以什么结尾 */ a[href$.pdf] { color: #dc3545; } /* 包含某个子串 */ [data-state*loading] { opacity: .6; } /* 大小写不敏感匹配 */ [data-stateactive i] { color: #198754; }[attr^value]匹配开头[attr$value]匹配结尾[attr*value]匹配包含关系。后面加一个i可以让匹配忽略大小写。这里的实用场景非常多你想给所有外链自动加个小图标不用手动给链接加class你想根据>[data-statedraft] { background: #f8f9fa; } [data-statereview] { border-left: 4px solid #ffc107; } [data-statepublished] { border-left: 4px solid #198754; }这样写的好处是状态和视觉分离加新状态时只改HTML属性或CSS规则不用动结构。要注意的是属性选择器是精确匹配[attr^]、[attr$]、[attr*]这三个掌握好大多数场景就够用了。2.2 结构化伪类处理列表和表格的批量操作如果说属性选择器是“按特征选”结构化伪类就是“按位置选”。这里最常用的是:nth-child()它的参数是一个an b公式2n1是奇数行2n是偶数行3n1是每3个里的第1个。表格斑马纹是最经典的应用tbody tr:nth-child(even) { background: #f7f8fa; }但这里有一个非常容易踩的坑:nth-child(2)选中的是父元素下的“第二个子元素”不是“第二个列表项”。如果列表中间混了其他标签比如ul里除了li还有一个span:nth-child(2)可能选中的就是那个span。而:nth-of-type(2)是按元素类型来数的选中的是第二个li。所以当结构不纯粹时用:nth-of-type更安全。:not()也经常和结构化伪类配合使用比如表单里要排除typecheckbox的选项.form-field:not([typecheckbox]) { margin-bottom: 1rem; }还有一个小技巧是配合:last-child做列表末尾的处理。比如列表每项都有底部边框但最后一项的边框要去掉.list-item:not(:last-child) { border-bottom: 1px solid #e5e7eb; }这种写法比单独给最后一项加class要干净得多。2.3 现代组合逻辑:is()、:where()、:has()这三个是CSS后续模块里出现的选择器但已经非常普及了我把它归到“基础”里讲因为它们真的改变写法。:is()的作用是选择器分组。以前你要写.card h2, .card h3, .card .content { font-size: 1rem; }现在可以写.card :is(h2, h3, .content) { font-size: 1rem; }:where()的写法和:is()类似区别在于优先级。:is()的优先级取参数列表里最高的一项而:where()的优先级永远是0。这有什么用当你写重置样式时用:where()特别合适因为任何组件自定义样式都能轻松覆盖它不会被全局reset卡住优先级。:where(button, input) { border: 0; font: inherit; }:has()就更重要了它能实现“父选择器”也就是根据子元素状态选中父级。比如表单卡片的边框只要有校验错误就变红.form-group:has(.error-message) { border-color: #dc3545; }再比如卡片里有图片时可能想去掉内边距让图片通栏.card:has( img) { padding: 0; }:has()现在已经得到主流浏览器支持但它依然是开销较高的选择器不建议在大列表上频繁使用。实际项目里可以先降级用:has()写增强样式老浏览器即使不识别页面主体功能也不受影响。2.4 优先级所有选择器问题都躲不开的地基学了一堆新选择器如果优先级概念搞不清反而容易越写越乱。优先级计算规则其实很简单内联样式 ID选择器 类/属性/伪类 元素/伪元素。:is()取最高优先级:where()是0!important是最后手段但尽量不要频繁使用。我见过很多团队项目最后互相覆盖全靠!important叠起来维护成本非常高。合理的做法是定一套命名约束比如BEM风格的.block__element--modifier让选择器层级扁平化大部分样式都是单一类选择器优先级自然可控。有人可能会问“既然选了BEM那学这些复杂选择器是不是没用了”当然不是。BEM解决的是组件化命名问题选择器能力解决的是特殊状态和结构匹配问题两者是互补的。比如BEM负责“这个按钮的默认状态”选择器负责“按钮在容器里的第一个时去掉左边距”各司其职代码才会比较好读。3. 布局从“浮动清浮动”到Flex和Grid双引擎选择器解决的是“选谁”布局解决的是“放哪”。CSS3在布局上的贡献在我看来是革命性的。以前一个水平导航栏要用float: left加上clearfix后面的人还要花时间理解为什么清浮动是老生常谈。现在Flexbox和Grid就是两个专门的布局引擎把原来那些hack全部踢进了历史。3.1 浮动时代的遗产为什么还要了解floatfloat的初衷是文字环绕图片结果被拿来当页面布局工具用了十几年。既然现在有Flex和Grid为什么还要提它因为老代码还得维护。很多上古项目页面布局依然用float邮件模板里float和table也依然是主流。如果你理解float的原本用途修这类bug时会快很多。比如一个简单的图片环绕排版用float还是最自然的方式.figure-left { float: left; margin-right: 1rem; width: 40%; }但如果你要做的是一整行的导航、等高的列表、左右对齐的工具条就别用float了。float会脱离正常文档流父容器高度塌陷还得用clearfixFlex和Grid不会天生踩这个坑。现在的定位应该是邮件模板、老代码维护、文字环绕特殊排版用float日常页面布局尽量别碰。3.2 一维布局Flexbox主轴的思维方式Flexbox的设计哲学是“一维排列”。它有两种坐标系主轴main axis和交叉轴cross axis。容器上flex-direction决定主轴方向justify-content控制主轴对齐align-items控制交叉轴对齐。很多人搞混其实只要脑子里始终想着“我先让元素往哪个方向排再对齐”就不会乱。一个最常见的导航栏nav classnav a classnav__brandLogo/a a classnav__link首页/a a classnav__link关于/a button classnav__cta登录/button /nav.nav { display: flex; align-items: center; gap: 1rem; padding: 0 20px; } .nav__brand { margin-right: auto; }注意这里margin-right: auto的作用Flex布局里automargin会吞掉所有剩余空间把Logo和后面的链接分隔开链接就自动被推到右边。这比写一个nav__spacer元素要干净很多。再来说说三个关键属性的简写。flex: 1等价于flex: 1 1 0%意思是可以拉伸、可以压缩、初始尺寸是0。新手经常困惑为什么flex: 1的兄弟元素宽度总是不符合预期因为它的basis是0宽度完全由剩余空间分配决定。如果想让某个元素不被压缩就要用flex-shrink: 0常见于表单项的标签或固定尺寸的图标。还有一个容易忽略的点flex-wrap: wrap开启换行后align-items只控制单行内交叉轴对齐行与行之间的距离由align-content控制。这个很容易被忽略导致换行后间距怎么调都不对。3.3 二维布局Grid网格轨道与区域Grid和Flex最大的区别是Grid是二维的同时管理行和列Flex是一维的主轴排完再靠换行实现多行效果。当页面整体骨架是“头部、侧边栏、主内容区、底部”这种结构时Grid的舒适度是Flex完全比不了的。看一个典型的页面骨架.page { display: grid; grid-template-columns: 240px 1fr; grid-template-areas: header header sidebar main footer footer; min-height: 100vh; } .page__header { grid-area: header; } .page__sidebar { grid-area: sidebar; } .page__main { grid-area: main; } .page__footer { grid-area: footer; }通过grid-template-areas直观地描述了布局形状代码读起来和看到的效果几乎一一对应。这也是我推荐Grid的重要原因可读性和可维护性比浮动时代高太多了。另一个非常常用的场景是卡片墙。想实现“每行自动放尽可能多的卡片每张卡片最小220px”的效果.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; }minmax(220px, 1fr)的意思是每列最小220px有空余空间就平均分给各列auto-fill会让Grid尽可能多地创建轨道。如果你换成auto-fit空轨道会被折叠空行也会消失。这两个关键词的结果差异很微妙建议自己在DevTools里切着看一遍看了就懂。3.4 双引擎选型策略什么时候用Flex什么时候用Grid这个问题我几乎每次面试都会遇到。我的经验是先想布局是“一维”还是“二维”。场景推荐原因导航栏一排链接Flexbox本质是一维排列头部logo 搜索框 按钮Flexbox需要灵活对齐和自动间距卡片墙、产品列表Grid同时处理行和列页面整体骨架Grid跨行跨列更直观组件内部图标文字Flexbox控件内部细节网格过重两者嵌套是最常见的情况外层用Grid控制整页骨架内层用Flex处理每块区域里的对齐和间距。gap属性在Flex和Grid中都可以用统一间距非常方便不用再靠margin左减右加的hack。另外还有两个现代助手属性值得掌握。aspect-ratio可以简单地保持宽高比比如视频封面.video-thumb { aspect-ratio: 16 / 9; object-fit: cover; }object-fit: cover则让图片像背景图一样按比例裁切填满盒子。这两个属性组合起来写卡片里的封面图非常省心。4. 视觉表现层把“绘制”的活交给CSS布局搭好后页面通常是灰扑扑的。CSS3最直观的视觉红利就是把以前需要设计师切图、前端拼图的活儿交给了样式表本身。圆角、阴影、渐变、滤镜这些东西单独看都很简单但组合起来能量很大。4.1 圆角的半径细节不只是“变圆”border-radius是CSS3里最被低估的属性之一。你以为它只是让角落变圆其实它内部有一套椭圆半径规则。一个值写给四个角两个值分别是左上/右下、右上/左下三个值依次是左上、右上/左下、右下。如果写斜杠比如border-radius: 10px / 30px斜杠前是水平半径斜杠后是垂直半径这样才能做出椭圆形的圆角。常见用法.avatar { width: 64px; height: 64px; border-radius: 50%; } .tag { border-radius: 999px; }头像用50%可以变成圆形但前提是宽高相等否则会变成椭圆。标签用999px这种极大的半径无论高度怎么变都能保持胶囊形非常适合标签、按钮这类元素。配合overflow: hidden可以裁切子元素让图片等子元素也跟随圆角.card { border-radius: 16px; overflow: hidden; }这里有个实际坑如果卡片同时用了box-shadowoverflow: hidden会把阴影裁掉一半。解决办法是把阴影放在外层包裹元素上或者给卡片加一层带内边距的父容器让阴影区域留出空间。4.2 阴影box-shadow和text-shadow的正确姿势box-shadow的参数顺序是x偏移 y偏移 模糊半径 扩展半径 颜色 inset。很多人只记前三个忽略了扩展半径。实际上扩展半径很实用配合inset可以做“内部描边”.outline { box-shadow: inset 0 0 0 1px #e5e7eb; }这比border: 1px solid #e5e7eb好在哪里不占盒子尺寸不会影响宽高计算。多层阴影可以实现很多拟物效果比如带外发光和内在阴影的输入框.input:focus { box-shadow: 0 0 0 3px rgba(37, 99, 235, .25), inset 0 1px 2px rgba(0, 0, 0, .08); }text-shadow操作的是文字可以做描边效果。比如白字加黑色描边在图片上保持可读.text-stroke { color: #fff; text-shadow: 0 0 2px rgba(0, 0, 0, .8); }性能上注意一点blur半径越大的阴影越耗GPU。页面滚动时如果同时出现几十个box-shadow大阴影容易掉帧。遇到大面积阴影需求更好的做法是生成一张渐变背景或用伪元素模拟而不是硬堆box-shadow。4.3 渐变线性、径向、锥形渐变是一块很容易被忽略的强能力。线性渐变就够写很多背景了但用好它有几个细节。linear-gradient的方向可以写角度也可以写to right这类关键词。颜色节点是渐变的核心比如一个带分段感的按钮背景.btn { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }径向渐变radial-gradient适合做卡片上的高光、光晕.glow { background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .8), transparent 60%); }锥形渐变conic-gradient可以画饼图、仪表盘配合mask还能做加载环。不过日常开发里更实用的其实是重复渐变。比如做一个带斜向条纹的进度条.progress-stripes { background: repeating-linear-gradient( 45deg, #3b82f6 0, #3b82f6 12px, #60a5fa 12px, #60a5fa 24px ); animation: slide 1s linear infinite; }这里要记住一个反直觉的点渐变属于background-image不是background-color。所以当你试图用transition: background .3s来平滑切换两种渐变背景时不会有动画效果因为background-image本身不支持过渡。想实现渐变切换动效通常用伪元素叠加透明度变化或者改变background-position。4.4 滤镜与混合模式表现的下一层filter是对元素本身的修饰最常见的场景是灰度图和hover恢复彩色.photo { filter: grayscale(1); transition: filter .3s ease; } .photo:hover { filter: grayscale(0); }backdrop-filter是对元素背后内容的处理也就是毛玻璃.glass { background: rgba(255, 255, 255, .5); backdrop-filter: blur(12px); }这个效果在导航栏里很漂亮但要注意backdrop-filter会让浏览器创建额外的渲染层在长列表或大滚动区域上大面积使用性能会直线下降。我一般只在固定定位的头部导航上使用。mix-blend-mode可以做文字和背景的混合比如过度曝光风格的标题。但混合模式对浏览器渲染压力大而且可访问性上不好保证建议用在装饰性元素上不要用在正文核心内容里。4.5 背景的高级玩法多背景和文字渐变CSS3允许元素设置多个背景这个能力很实用。最常见的用法是渐变遮罩压图片保证文字可读.hero { background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url(hero.jpg) center/cover no-repeat; }多个背景之间用逗号隔开先写的在上层后写的在下层。这里url(hero.jpg) center/cover其实是一个复合写法指定了位置、尺寸和是否重复。另一个经典玩法是渐变文字.gradient-text { background: linear-gradient(90deg, #f59e0b, #ef4444); -webkit-background-clip: text; background-clip: text; color: transparent; }把背景裁切到文字范围然后把文字颜色设为透明就得到了渐变字。这里要提醒一下color: transparent会同时影响文字选中时的状态所以标题、品牌字这种装饰性文字用一下就好正文不要这么玩。5. 让页面“动”起来的正确姿势transition、transform与animation动效在现代产品里不是装饰是体验的一环。CSS3提供的动效模块有三个transition、transform、animation。很多人一上来就学keyframes动画结果做出来的效果又卡又乱。我的建议是先理解transform和transition再上animation顺序对了会顺很多。5.1 transform合成器的礼物transform可以完成平移、旋转、缩放、倾斜以及各种组合。它解决的不只是“能把元素移动到哪里”还有一个更深的问题性能。对比来看如果你用top和left移动元素浏览器每帧都要重新计算布局layout和绘制paint而transform的位移发生在合成阶段compositor元素会被提升到单独的图层移动时不需要重新布局。这也是为什么我建议能用transform做的移动绝不用top/left。一个经典的悬浮卡片效果.card { transition: transform .25s ease, box-shadow .25s ease; } .card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0, 0, 0, .12); }transition负责补间动画hover时transform和box-shadow发生变化浏览器自动计算中间值。变形还有一个容易忽略的点变换顺序很重要。transform: translateX(10px) rotate(45deg)和transform: rotate(45deg) translateX(10px)效果完全不同因为变换是矩阵叠加的顺序不同代表先平移再旋转还是先旋转再平移。实战中我会按直觉排列先位移、再旋转、后缩放这样写别人也容易理解。5.2 transition状态之间的过渡transition有四个核心参数属性、时长、时间函数、延迟。时间函数里ease-in-out适合大多数自然动作linear适合进度条旋转steps(n)适合打字机效果和逐帧动画。一个很容易踩的坑是transition只对“可计算差值”的属性生效。display不可过渡height: auto和固定高度之间也不能直接过渡background-image同样不可过渡。这些属性变化时要么瞬间生效要么需要技巧。比如折叠面板现在有个很优雅的做法是利用grid-template-rows.accordion-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; overflow: hidden; } .accordion.open .accordion-body { grid-template-rows: 1fr; }这样能让高度从0平滑展开到内容高度且不需要知道具体高度是多少比max-height方案要精准得多。5.3 animation与keyframes关键帧动画当你需要“自动播放、循环播放、多阶段”的动效时用animation。它的核心是keyframes定义关键帧然后通过一系列属性控制播放。最简单的加载旋转keyframes spin { to { transform: rotate(360deg); } } .loader { width: 32px; height: 32px; border: 3px solid #e5e7eb; border-top-color: #2563eb; border-radius: 50%; animation: spin .8s linear infinite; }animation有很多子属性常用的包括duration、timing-function、iteration-count、direction、fill-mode。我特别想强调fill-mode很多人做入场动画时发现动画播放完元素又弹回初始状态了就是因为没设fill-mode: forwards或者both。forwards表示动画结束后保留最后一帧的样式backwards表示延迟期间先用第一帧的样式both就是两者都要。再分享一个骨架屏用法原理是用一个斜向渐变的伪元素在容器里扫过.skeleton { position: relative; overflow: hidden; background: #f3f4f6; } .skeleton::after { content: ; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent); animation: shimmer 1.5s infinite; } keyframes shimmer { 100% { transform: translateX(100%); } }动画和JS配合时正确的模式是用JS切换class触发CSS动画JS只负责状态动画由CSS完成。如果需要动画结束后的逻辑监听animationend事件比在JS里写setTimeout要可靠因为定时器不会考虑动画的实际播放情况。5.4 动效性能与可访问性动效性能有一个很朴素的检查清单尽量只动transform和opacity。这两个属性不会触发layout只走合成层。will-change: transform可以提前提示浏览器创建合成层但不要大面积滥用否则会反过来增加内存压力。可访问性也不能漏。有人有前庭功能障碍看到大面积动效会头晕。业界约定是尊重prefers-reduced-motion这个媒体查询media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }这段代码的意思是如果用户系统设置了“减少动态效果”就尽量让动画瞬间完成。这只是兜底策略更好的做法是在产品动效设计阶段就保持克制不要为了炫技而动画。6. 响应式的现代解法从媒体查询到容器查询屏幕尺寸一变原本正常的布局就塌了。这个问题的经典解法是媒体查询但媒体查询有一个天然局限它只能感知视口宽度感知不到某个组件在页面里的实际空间。容器查询就是为了解决这个问题出现的。6.1 传统媒体查询断点设计先说基础。媒体查询的语法很直观.card-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); } } media (min-width: 1024px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }这段代码是“移动优先”写法先写窄屏单列再逐步增加列数。移动优先的好处是默认样式简单后面的媒体查询只是增量修改而不是推翻重写。很多人纠结断点到底选多少像素。不要照搬框架的断点表而是根据你的内容确定导航什么时候换行最合适卡片什么时候一行放不下了表格什么时候开始变挤这些“断裂点”才是你该设置的断点。常见的参考值是640、768、1024、1280但完全按内容来。流式单位也能减少媒体查询的使用。clamp(min, val, max)可以做一个“区间伸缩”的字体大小h1 { font-size: clamp(1.5rem, 2vw 1rem, 2.5rem); }vw是视口宽度的1%2vw 1rem是一个随视口线性变化的中间值clamp把它限制在1.5rem和2.5rem之间。用这种方式字体在多数宽度下都能自动缩放媒体查询只负责处理真正的结构切换。6.2 容器查询组件级响应式容器查询的语法和媒体查询很像只是查询对象从“视口”变成了“容器”。先声明容器.card-list { container-type: inline-size; container-name: cards; }然后就可以针对这个容器做查询container cards (min-width: 480px) { .card { display: flex; } .card__cover { width: 200px; } }这个能力的价值在于同一个卡片组件放在侧边栏时是纵向排列放进主内容区时自动变成横向排列。组件不用关心它在页面里的位置只关心自己容器有多宽。这是以前靠媒体查询很难实现的。现在主流浏览器对容器查询已经支持得很不错了。新项目可以用起来老项目过渡期可以保留一点媒体查询作为兜底。我自己写新组件时已经习惯优先考虑容器查询因为它让组件更独立、更好复用。6.3 CSS变量与主题切换CSS变量也叫自定义属性是CSS3模块化时代非常重要的一块“地基”。它的价值在于把可变的视觉参数集中管理。基础用法:root { --color-primary: #2563eb; --space-sm: 8px; --space-md: 16px; } .button { background: var(--color-primary); padding: var(--space-sm) var(--space-md); }变量的继承规则也很实用在某个元素上重新定义变量它的子孙元素都会使用新值。利用这一点可以实现主题切换直接改变门面上的>html[data-themedark] { --color-bg: #111827; --color-text: #f3f4f6; } body { background: var(--color-bg); color: var(--color-text); }JS只需这样切换document.documentElement.setAttribute(data-theme, dark);整站颜色就换了。这个思路比写一堆.dark .section要轻量得多。还能顺便做平滑过渡body { transition: background-color .3s, color .3s; }CSS变量和SCSS等预处理器变量不一样的地方在于它是运行时变量可以在媒体查询里改可以在JS里改还能用var(--xxx, fallback)提供备用值。预处理器变量则是编译期的常量写完就固定了。两者可以配合用但不要混为一谈。6.4 逻辑属性与国际化做多语言站点时经常会遇到从右到左RTL的语言比如阿拉伯语、希伯来语。传统写法里margin-left、padding-right这种物理方向属性在RTL页面上就全反了通常要靠[dirrtl]重置一遍。逻辑属性是更好的答案.message { margin-inline-start: 1rem; border-inline-start: 4px solid #2563eb; }margin-inline-start会跟随文字方向在LTR页面里表示“左侧”在RTL页面里自动变为“右侧”。border-inline-start同理。对于做国际化产品的人来说这能省掉大量方向相关的hack也让页面代码更接近“语义”而不是“物理方向”。7. 打地基的实战路线拆透能力而不是背属性说了这么多最后聊聊怎么把这些基础真正变成自己的东西。我带团队这几年见过很多新人拿着属性表背了两天一问flex: 1的完整含义还是答不上来。原因很简单没有把知识放到真实场景里验证。7.1 不要背属性而是做小原型我建议每个模块都做一个小实验页面不要一次性做完整项目而是做八个经典组件按钮、导航栏、卡片、表格、表单、弹层、骨架屏、标签。每个组件里主动用上刚才讲的几类能力比如卡片必须包含圆角、阴影、渐变、伪元素、flex和grid的嵌套。做完之后把属性改来改去对比版式变化你才能真正理解每个属性在完整上下文里的作用。7.2 在真实项目中渐进引入老项目重构时优先级可以这样排先把浮动布局替换成Flex和Grid再把零散的margin换成统一的gap最后根据目标浏览器情况逐步引入CSS变量、容器查询这类新特性。新项目可以直接从现代CSS起步但要先确认团队目标浏览器范围用caniuse查清楚每个特性在目标浏览器里的支持情况。不要只看一个网站用了某新特性就觉得可以全上实际项目的兼容底线得自己定。7.3 用浏览器DevTools指导学习我经常看到有人遇到样式覆盖问题时靠肉眼猜这是最浪费时间的。Chrome DevTools的Computed面板可以直接显示当前元素最终生效的样式来自哪条规则优先级问题一眼就能定位。Flex和Grid调试时布局面板能显示网格轨道、对齐参考线把grid-template-areas的每个区域直观显示出来上课讲一百遍不如打开面板看一次。真正常遇到“为什么这个元素没按我预想排列”的时候优先看布局面板而不是盲目改属性。7.4 几个“看起来会了实际踩坑”的案例有一些坑是几乎每个人都会遇到的我这里列四个最典型的。第一个是100vh在移动端的问题。移动端浏览器的地址栏会占据视口高度100vh会超出实际可见区域导致布局底部被遮挡。可以用100dvh动态视口高度来替代或者在结构上使用min-height: 100vh配合内容自适应。第二个是渐变不能直接过渡。前面提过background-image不支持transition如果要在两个渐变色之间做动画最省事的方案是用两个伪元素叠在一起改变透明度来切换不要让浏览器去插值计算background-image。第三个是overflow: hidden会裁掉box-shadow。圆角卡片里同时想保留阴影最简单的做法是给卡片外面包一个带内边距的父容器阴影画在那个父容器上。第四个是按钮的默认样式。浏览器不会自动帮你去掉button的背景色和边框在用a或div模拟按钮时还会遇到鼠标样式、键盘焦点等问题。我的习惯是一开始就在全局重置里加上button { border: 0; background: transparent; font: inherit; cursor: pointer; }再配合:focus-visible画焦点环比遇到一个坑修一个坑要省心很多。写到这里最后分享几个我现在固定的习惯每个新项目的样式文件夹里只保留reset、tokensCSS变量、base、components、pages这五层任何动效先问自己“这个动效有没有必要”再谈性能优化布局默认从Grid开始想只有内容确实是一维排列时才用Flex每引入一个新CSS特性先写一个最小片段验证再落到真实项目。我带团队时也基本不让新人背语法而是把这套拆解跑一遍。CSS这个领域属性是背不完的但底层的能力框架就那么几块你把它们拆透了后面遇到任何新花样都不会慌。 CSS3核心基础：选择器、布局与动效实战解析
如果你写过几年前端大概率会有类似的感受CSS3不是“多会几个新属性”那么简单它把整个CSS的设计逻辑重新换了一遍。我最早意识到这件事是接手一个老商城页面做重构光是一个圆角按钮就要切背景图、做PNG阴影而旁边同时期的项目用border-radius和box-shadow三行就解决了。后来我系统地过了一遍CSS3里那些“基础能力”才发现真正值钱的不是那几行代码而是背后那套“描述页面表现”的心智模型。所以这篇文章不打算按文档目录把CSS3的所有属性罗列一遍而是把真正决定你水平的地基拆开讲选择器、布局、绘制、动效、响应式。每个方向都会配上可以直接复用的代码场景和踩坑经验不管你刚入门还是写了几年CSS但经常觉得“会又不会”都应该能从里面找到点东西。1. 先理解这套规范为什么叫“CSS3”1.1 版本简史从CSS2.1到模块化时代很多人以为CSS3是“CSS2之后的下一个版本”其实并不严谨。CSS2在1998年发布之后因为浏览器厂商各自为政标准一度停滞真正的CSS2.1直到2011年才彻底完成标准化。你去看老教程里经常出现的float布局、position: absolute定位、clearfix这些内容基本都是CSS2.1时期的技术。从CSS3开始W3C换了个思路不再等一个大版本统一推出而是把CSS拆成一个个独立的模块每个模块单独推进、单独定稿。所以严格来说并不存在一份叫“CSS3标准”的文档我们平时说的CSS3更像是一个时代的代称它涵盖了几十上百个模块。比如Flexbox是一个模块Grid是另一个模块CSS变量又是一个模块它们各自成熟的时间差了好几年浏览器支持情况也不一样。阶段关键特性典型问题CSS1字体、颜色、背景、基础文本样式页面只能靠表格布局CSS2定位、浮动、z-index、媒体类型浮动清浮动很痛苦响应式几乎为零模块化时代Flexbox、Grid、动画、滤镜、变量、容器查询特性非常多需要按模块学这个认知最大的实际用途就是查兼容性。不要搜“CSS3”要搜具体的“CSS Grid”“backdrop-filter”“:has()”用caniuse查具体模块的支持情况。你知道了这一点遇到任何新特性心里都有底它不是“CSS3里有没有”而是“当前目标浏览器支不支持这个模块”。1.2 所谓的“基础”到底指什么说到“CSS3基础”很多人第一反应是“入门教程”。我自己带过人之后越来越觉得“基础”这个词被误解了。CSS里真正的基础不是记住多少属性而是那些决定一切表现层表达的地基性概念盒模型、层叠、优先级、包含块、格式化上下文BFC。CSS3的很多新特性本质上都是在这些地基之上做优化。举个最简单的例子。display: flex看起来很神奇但如果你不理解“主轴”和“交叉轴”不理解的align-items默认值是stretch而不是center那你做出来的导航栏总会莫名其妙地被拉伸。再比如你学了position: sticky却不知道为什么偶尔失效那是因为你没有意识到它依赖于包含块的高度。所以这篇内容不会只列属性我会把每个知识点背后的逻辑讲清楚因为“基础”这个词真正值钱的地方是底层逻辑能复用到任何新特性上。2. 选择器语言真正意义上“用CSS选人”的能力CSS每条规则都在做两件事选中目标声明表现。很多人的问题不是不知道有多少种属性而是不知道怎么精准地选到想改的那个元素。CSS2时代基本靠class和id打天下于是产生了“类名地狱”一个元素上挂五六个class语义模糊还经常互相覆盖。CSS3的强化选择器体系本意是让你少写class、按结构或属性去匹配但很多人没意识到这一点。2.1 属性选择器从“看class”到“看属性”属性选择器可以按元素的属性来选语法很灵活。常见的有这些用法/* 以什么开头 */ a[href^http]::after { content: ↗; } /* 以什么结尾 */ a[href$.pdf] { color: #dc3545; } /* 包含某个子串 */ [data-state*loading] { opacity: .6; } /* 大小写不敏感匹配 */ [data-stateactive i] { color: #198754; }[attr^value]匹配开头[attr$value]匹配结尾[attr*value]匹配包含关系。后面加一个i可以让匹配忽略大小写。这里的实用场景非常多你想给所有外链自动加个小图标不用手动给链接加class你想根据>[data-statedraft] { background: #f8f9fa; } [data-statereview] { border-left: 4px solid #ffc107; } [data-statepublished] { border-left: 4px solid #198754; }这样写的好处是状态和视觉分离加新状态时只改HTML属性或CSS规则不用动结构。要注意的是属性选择器是精确匹配[attr^]、[attr$]、[attr*]这三个掌握好大多数场景就够用了。2.2 结构化伪类处理列表和表格的批量操作如果说属性选择器是“按特征选”结构化伪类就是“按位置选”。这里最常用的是:nth-child()它的参数是一个an b公式2n1是奇数行2n是偶数行3n1是每3个里的第1个。表格斑马纹是最经典的应用tbody tr:nth-child(even) { background: #f7f8fa; }但这里有一个非常容易踩的坑:nth-child(2)选中的是父元素下的“第二个子元素”不是“第二个列表项”。如果列表中间混了其他标签比如ul里除了li还有一个span:nth-child(2)可能选中的就是那个span。而:nth-of-type(2)是按元素类型来数的选中的是第二个li。所以当结构不纯粹时用:nth-of-type更安全。:not()也经常和结构化伪类配合使用比如表单里要排除typecheckbox的选项.form-field:not([typecheckbox]) { margin-bottom: 1rem; }还有一个小技巧是配合:last-child做列表末尾的处理。比如列表每项都有底部边框但最后一项的边框要去掉.list-item:not(:last-child) { border-bottom: 1px solid #e5e7eb; }这种写法比单独给最后一项加class要干净得多。2.3 现代组合逻辑:is()、:where()、:has()这三个是CSS后续模块里出现的选择器但已经非常普及了我把它归到“基础”里讲因为它们真的改变写法。:is()的作用是选择器分组。以前你要写.card h2, .card h3, .card .content { font-size: 1rem; }现在可以写.card :is(h2, h3, .content) { font-size: 1rem; }:where()的写法和:is()类似区别在于优先级。:is()的优先级取参数列表里最高的一项而:where()的优先级永远是0。这有什么用当你写重置样式时用:where()特别合适因为任何组件自定义样式都能轻松覆盖它不会被全局reset卡住优先级。:where(button, input) { border: 0; font: inherit; }:has()就更重要了它能实现“父选择器”也就是根据子元素状态选中父级。比如表单卡片的边框只要有校验错误就变红.form-group:has(.error-message) { border-color: #dc3545; }再比如卡片里有图片时可能想去掉内边距让图片通栏.card:has( img) { padding: 0; }:has()现在已经得到主流浏览器支持但它依然是开销较高的选择器不建议在大列表上频繁使用。实际项目里可以先降级用:has()写增强样式老浏览器即使不识别页面主体功能也不受影响。2.4 优先级所有选择器问题都躲不开的地基学了一堆新选择器如果优先级概念搞不清反而容易越写越乱。优先级计算规则其实很简单内联样式 ID选择器 类/属性/伪类 元素/伪元素。:is()取最高优先级:where()是0!important是最后手段但尽量不要频繁使用。我见过很多团队项目最后互相覆盖全靠!important叠起来维护成本非常高。合理的做法是定一套命名约束比如BEM风格的.block__element--modifier让选择器层级扁平化大部分样式都是单一类选择器优先级自然可控。有人可能会问“既然选了BEM那学这些复杂选择器是不是没用了”当然不是。BEM解决的是组件化命名问题选择器能力解决的是特殊状态和结构匹配问题两者是互补的。比如BEM负责“这个按钮的默认状态”选择器负责“按钮在容器里的第一个时去掉左边距”各司其职代码才会比较好读。3. 布局从“浮动清浮动”到Flex和Grid双引擎选择器解决的是“选谁”布局解决的是“放哪”。CSS3在布局上的贡献在我看来是革命性的。以前一个水平导航栏要用float: left加上clearfix后面的人还要花时间理解为什么清浮动是老生常谈。现在Flexbox和Grid就是两个专门的布局引擎把原来那些hack全部踢进了历史。3.1 浮动时代的遗产为什么还要了解floatfloat的初衷是文字环绕图片结果被拿来当页面布局工具用了十几年。既然现在有Flex和Grid为什么还要提它因为老代码还得维护。很多上古项目页面布局依然用float邮件模板里float和table也依然是主流。如果你理解float的原本用途修这类bug时会快很多。比如一个简单的图片环绕排版用float还是最自然的方式.figure-left { float: left; margin-right: 1rem; width: 40%; }但如果你要做的是一整行的导航、等高的列表、左右对齐的工具条就别用float了。float会脱离正常文档流父容器高度塌陷还得用clearfixFlex和Grid不会天生踩这个坑。现在的定位应该是邮件模板、老代码维护、文字环绕特殊排版用float日常页面布局尽量别碰。3.2 一维布局Flexbox主轴的思维方式Flexbox的设计哲学是“一维排列”。它有两种坐标系主轴main axis和交叉轴cross axis。容器上flex-direction决定主轴方向justify-content控制主轴对齐align-items控制交叉轴对齐。很多人搞混其实只要脑子里始终想着“我先让元素往哪个方向排再对齐”就不会乱。一个最常见的导航栏nav classnav a classnav__brandLogo/a a classnav__link首页/a a classnav__link关于/a button classnav__cta登录/button /nav.nav { display: flex; align-items: center; gap: 1rem; padding: 0 20px; } .nav__brand { margin-right: auto; }注意这里margin-right: auto的作用Flex布局里automargin会吞掉所有剩余空间把Logo和后面的链接分隔开链接就自动被推到右边。这比写一个nav__spacer元素要干净很多。再来说说三个关键属性的简写。flex: 1等价于flex: 1 1 0%意思是可以拉伸、可以压缩、初始尺寸是0。新手经常困惑为什么flex: 1的兄弟元素宽度总是不符合预期因为它的basis是0宽度完全由剩余空间分配决定。如果想让某个元素不被压缩就要用flex-shrink: 0常见于表单项的标签或固定尺寸的图标。还有一个容易忽略的点flex-wrap: wrap开启换行后align-items只控制单行内交叉轴对齐行与行之间的距离由align-content控制。这个很容易被忽略导致换行后间距怎么调都不对。3.3 二维布局Grid网格轨道与区域Grid和Flex最大的区别是Grid是二维的同时管理行和列Flex是一维的主轴排完再靠换行实现多行效果。当页面整体骨架是“头部、侧边栏、主内容区、底部”这种结构时Grid的舒适度是Flex完全比不了的。看一个典型的页面骨架.page { display: grid; grid-template-columns: 240px 1fr; grid-template-areas: header header sidebar main footer footer; min-height: 100vh; } .page__header { grid-area: header; } .page__sidebar { grid-area: sidebar; } .page__main { grid-area: main; } .page__footer { grid-area: footer; }通过grid-template-areas直观地描述了布局形状代码读起来和看到的效果几乎一一对应。这也是我推荐Grid的重要原因可读性和可维护性比浮动时代高太多了。另一个非常常用的场景是卡片墙。想实现“每行自动放尽可能多的卡片每张卡片最小220px”的效果.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; }minmax(220px, 1fr)的意思是每列最小220px有空余空间就平均分给各列auto-fill会让Grid尽可能多地创建轨道。如果你换成auto-fit空轨道会被折叠空行也会消失。这两个关键词的结果差异很微妙建议自己在DevTools里切着看一遍看了就懂。3.4 双引擎选型策略什么时候用Flex什么时候用Grid这个问题我几乎每次面试都会遇到。我的经验是先想布局是“一维”还是“二维”。场景推荐原因导航栏一排链接Flexbox本质是一维排列头部logo 搜索框 按钮Flexbox需要灵活对齐和自动间距卡片墙、产品列表Grid同时处理行和列页面整体骨架Grid跨行跨列更直观组件内部图标文字Flexbox控件内部细节网格过重两者嵌套是最常见的情况外层用Grid控制整页骨架内层用Flex处理每块区域里的对齐和间距。gap属性在Flex和Grid中都可以用统一间距非常方便不用再靠margin左减右加的hack。另外还有两个现代助手属性值得掌握。aspect-ratio可以简单地保持宽高比比如视频封面.video-thumb { aspect-ratio: 16 / 9; object-fit: cover; }object-fit: cover则让图片像背景图一样按比例裁切填满盒子。这两个属性组合起来写卡片里的封面图非常省心。4. 视觉表现层把“绘制”的活交给CSS布局搭好后页面通常是灰扑扑的。CSS3最直观的视觉红利就是把以前需要设计师切图、前端拼图的活儿交给了样式表本身。圆角、阴影、渐变、滤镜这些东西单独看都很简单但组合起来能量很大。4.1 圆角的半径细节不只是“变圆”border-radius是CSS3里最被低估的属性之一。你以为它只是让角落变圆其实它内部有一套椭圆半径规则。一个值写给四个角两个值分别是左上/右下、右上/左下三个值依次是左上、右上/左下、右下。如果写斜杠比如border-radius: 10px / 30px斜杠前是水平半径斜杠后是垂直半径这样才能做出椭圆形的圆角。常见用法.avatar { width: 64px; height: 64px; border-radius: 50%; } .tag { border-radius: 999px; }头像用50%可以变成圆形但前提是宽高相等否则会变成椭圆。标签用999px这种极大的半径无论高度怎么变都能保持胶囊形非常适合标签、按钮这类元素。配合overflow: hidden可以裁切子元素让图片等子元素也跟随圆角.card { border-radius: 16px; overflow: hidden; }这里有个实际坑如果卡片同时用了box-shadowoverflow: hidden会把阴影裁掉一半。解决办法是把阴影放在外层包裹元素上或者给卡片加一层带内边距的父容器让阴影区域留出空间。4.2 阴影box-shadow和text-shadow的正确姿势box-shadow的参数顺序是x偏移 y偏移 模糊半径 扩展半径 颜色 inset。很多人只记前三个忽略了扩展半径。实际上扩展半径很实用配合inset可以做“内部描边”.outline { box-shadow: inset 0 0 0 1px #e5e7eb; }这比border: 1px solid #e5e7eb好在哪里不占盒子尺寸不会影响宽高计算。多层阴影可以实现很多拟物效果比如带外发光和内在阴影的输入框.input:focus { box-shadow: 0 0 0 3px rgba(37, 99, 235, .25), inset 0 1px 2px rgba(0, 0, 0, .08); }text-shadow操作的是文字可以做描边效果。比如白字加黑色描边在图片上保持可读.text-stroke { color: #fff; text-shadow: 0 0 2px rgba(0, 0, 0, .8); }性能上注意一点blur半径越大的阴影越耗GPU。页面滚动时如果同时出现几十个box-shadow大阴影容易掉帧。遇到大面积阴影需求更好的做法是生成一张渐变背景或用伪元素模拟而不是硬堆box-shadow。4.3 渐变线性、径向、锥形渐变是一块很容易被忽略的强能力。线性渐变就够写很多背景了但用好它有几个细节。linear-gradient的方向可以写角度也可以写to right这类关键词。颜色节点是渐变的核心比如一个带分段感的按钮背景.btn { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }径向渐变radial-gradient适合做卡片上的高光、光晕.glow { background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .8), transparent 60%); }锥形渐变conic-gradient可以画饼图、仪表盘配合mask还能做加载环。不过日常开发里更实用的其实是重复渐变。比如做一个带斜向条纹的进度条.progress-stripes { background: repeating-linear-gradient( 45deg, #3b82f6 0, #3b82f6 12px, #60a5fa 12px, #60a5fa 24px ); animation: slide 1s linear infinite; }这里要记住一个反直觉的点渐变属于background-image不是background-color。所以当你试图用transition: background .3s来平滑切换两种渐变背景时不会有动画效果因为background-image本身不支持过渡。想实现渐变切换动效通常用伪元素叠加透明度变化或者改变background-position。4.4 滤镜与混合模式表现的下一层filter是对元素本身的修饰最常见的场景是灰度图和hover恢复彩色.photo { filter: grayscale(1); transition: filter .3s ease; } .photo:hover { filter: grayscale(0); }backdrop-filter是对元素背后内容的处理也就是毛玻璃.glass { background: rgba(255, 255, 255, .5); backdrop-filter: blur(12px); }这个效果在导航栏里很漂亮但要注意backdrop-filter会让浏览器创建额外的渲染层在长列表或大滚动区域上大面积使用性能会直线下降。我一般只在固定定位的头部导航上使用。mix-blend-mode可以做文字和背景的混合比如过度曝光风格的标题。但混合模式对浏览器渲染压力大而且可访问性上不好保证建议用在装饰性元素上不要用在正文核心内容里。4.5 背景的高级玩法多背景和文字渐变CSS3允许元素设置多个背景这个能力很实用。最常见的用法是渐变遮罩压图片保证文字可读.hero { background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url(hero.jpg) center/cover no-repeat; }多个背景之间用逗号隔开先写的在上层后写的在下层。这里url(hero.jpg) center/cover其实是一个复合写法指定了位置、尺寸和是否重复。另一个经典玩法是渐变文字.gradient-text { background: linear-gradient(90deg, #f59e0b, #ef4444); -webkit-background-clip: text; background-clip: text; color: transparent; }把背景裁切到文字范围然后把文字颜色设为透明就得到了渐变字。这里要提醒一下color: transparent会同时影响文字选中时的状态所以标题、品牌字这种装饰性文字用一下就好正文不要这么玩。5. 让页面“动”起来的正确姿势transition、transform与animation动效在现代产品里不是装饰是体验的一环。CSS3提供的动效模块有三个transition、transform、animation。很多人一上来就学keyframes动画结果做出来的效果又卡又乱。我的建议是先理解transform和transition再上animation顺序对了会顺很多。5.1 transform合成器的礼物transform可以完成平移、旋转、缩放、倾斜以及各种组合。它解决的不只是“能把元素移动到哪里”还有一个更深的问题性能。对比来看如果你用top和left移动元素浏览器每帧都要重新计算布局layout和绘制paint而transform的位移发生在合成阶段compositor元素会被提升到单独的图层移动时不需要重新布局。这也是为什么我建议能用transform做的移动绝不用top/left。一个经典的悬浮卡片效果.card { transition: transform .25s ease, box-shadow .25s ease; } .card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0, 0, 0, .12); }transition负责补间动画hover时transform和box-shadow发生变化浏览器自动计算中间值。变形还有一个容易忽略的点变换顺序很重要。transform: translateX(10px) rotate(45deg)和transform: rotate(45deg) translateX(10px)效果完全不同因为变换是矩阵叠加的顺序不同代表先平移再旋转还是先旋转再平移。实战中我会按直觉排列先位移、再旋转、后缩放这样写别人也容易理解。5.2 transition状态之间的过渡transition有四个核心参数属性、时长、时间函数、延迟。时间函数里ease-in-out适合大多数自然动作linear适合进度条旋转steps(n)适合打字机效果和逐帧动画。一个很容易踩的坑是transition只对“可计算差值”的属性生效。display不可过渡height: auto和固定高度之间也不能直接过渡background-image同样不可过渡。这些属性变化时要么瞬间生效要么需要技巧。比如折叠面板现在有个很优雅的做法是利用grid-template-rows.accordion-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; overflow: hidden; } .accordion.open .accordion-body { grid-template-rows: 1fr; }这样能让高度从0平滑展开到内容高度且不需要知道具体高度是多少比max-height方案要精准得多。5.3 animation与keyframes关键帧动画当你需要“自动播放、循环播放、多阶段”的动效时用animation。它的核心是keyframes定义关键帧然后通过一系列属性控制播放。最简单的加载旋转keyframes spin { to { transform: rotate(360deg); } } .loader { width: 32px; height: 32px; border: 3px solid #e5e7eb; border-top-color: #2563eb; border-radius: 50%; animation: spin .8s linear infinite; }animation有很多子属性常用的包括duration、timing-function、iteration-count、direction、fill-mode。我特别想强调fill-mode很多人做入场动画时发现动画播放完元素又弹回初始状态了就是因为没设fill-mode: forwards或者both。forwards表示动画结束后保留最后一帧的样式backwards表示延迟期间先用第一帧的样式both就是两者都要。再分享一个骨架屏用法原理是用一个斜向渐变的伪元素在容器里扫过.skeleton { position: relative; overflow: hidden; background: #f3f4f6; } .skeleton::after { content: ; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent); animation: shimmer 1.5s infinite; } keyframes shimmer { 100% { transform: translateX(100%); } }动画和JS配合时正确的模式是用JS切换class触发CSS动画JS只负责状态动画由CSS完成。如果需要动画结束后的逻辑监听animationend事件比在JS里写setTimeout要可靠因为定时器不会考虑动画的实际播放情况。5.4 动效性能与可访问性动效性能有一个很朴素的检查清单尽量只动transform和opacity。这两个属性不会触发layout只走合成层。will-change: transform可以提前提示浏览器创建合成层但不要大面积滥用否则会反过来增加内存压力。可访问性也不能漏。有人有前庭功能障碍看到大面积动效会头晕。业界约定是尊重prefers-reduced-motion这个媒体查询media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }这段代码的意思是如果用户系统设置了“减少动态效果”就尽量让动画瞬间完成。这只是兜底策略更好的做法是在产品动效设计阶段就保持克制不要为了炫技而动画。6. 响应式的现代解法从媒体查询到容器查询屏幕尺寸一变原本正常的布局就塌了。这个问题的经典解法是媒体查询但媒体查询有一个天然局限它只能感知视口宽度感知不到某个组件在页面里的实际空间。容器查询就是为了解决这个问题出现的。6.1 传统媒体查询断点设计先说基础。媒体查询的语法很直观.card-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); } } media (min-width: 1024px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }这段代码是“移动优先”写法先写窄屏单列再逐步增加列数。移动优先的好处是默认样式简单后面的媒体查询只是增量修改而不是推翻重写。很多人纠结断点到底选多少像素。不要照搬框架的断点表而是根据你的内容确定导航什么时候换行最合适卡片什么时候一行放不下了表格什么时候开始变挤这些“断裂点”才是你该设置的断点。常见的参考值是640、768、1024、1280但完全按内容来。流式单位也能减少媒体查询的使用。clamp(min, val, max)可以做一个“区间伸缩”的字体大小h1 { font-size: clamp(1.5rem, 2vw 1rem, 2.5rem); }vw是视口宽度的1%2vw 1rem是一个随视口线性变化的中间值clamp把它限制在1.5rem和2.5rem之间。用这种方式字体在多数宽度下都能自动缩放媒体查询只负责处理真正的结构切换。6.2 容器查询组件级响应式容器查询的语法和媒体查询很像只是查询对象从“视口”变成了“容器”。先声明容器.card-list { container-type: inline-size; container-name: cards; }然后就可以针对这个容器做查询container cards (min-width: 480px) { .card { display: flex; } .card__cover { width: 200px; } }这个能力的价值在于同一个卡片组件放在侧边栏时是纵向排列放进主内容区时自动变成横向排列。组件不用关心它在页面里的位置只关心自己容器有多宽。这是以前靠媒体查询很难实现的。现在主流浏览器对容器查询已经支持得很不错了。新项目可以用起来老项目过渡期可以保留一点媒体查询作为兜底。我自己写新组件时已经习惯优先考虑容器查询因为它让组件更独立、更好复用。6.3 CSS变量与主题切换CSS变量也叫自定义属性是CSS3模块化时代非常重要的一块“地基”。它的价值在于把可变的视觉参数集中管理。基础用法:root { --color-primary: #2563eb; --space-sm: 8px; --space-md: 16px; } .button { background: var(--color-primary); padding: var(--space-sm) var(--space-md); }变量的继承规则也很实用在某个元素上重新定义变量它的子孙元素都会使用新值。利用这一点可以实现主题切换直接改变门面上的>html[data-themedark] { --color-bg: #111827; --color-text: #f3f4f6; } body { background: var(--color-bg); color: var(--color-text); }JS只需这样切换document.documentElement.setAttribute(data-theme, dark);整站颜色就换了。这个思路比写一堆.dark .section要轻量得多。还能顺便做平滑过渡body { transition: background-color .3s, color .3s; }CSS变量和SCSS等预处理器变量不一样的地方在于它是运行时变量可以在媒体查询里改可以在JS里改还能用var(--xxx, fallback)提供备用值。预处理器变量则是编译期的常量写完就固定了。两者可以配合用但不要混为一谈。6.4 逻辑属性与国际化做多语言站点时经常会遇到从右到左RTL的语言比如阿拉伯语、希伯来语。传统写法里margin-left、padding-right这种物理方向属性在RTL页面上就全反了通常要靠[dirrtl]重置一遍。逻辑属性是更好的答案.message { margin-inline-start: 1rem; border-inline-start: 4px solid #2563eb; }margin-inline-start会跟随文字方向在LTR页面里表示“左侧”在RTL页面里自动变为“右侧”。border-inline-start同理。对于做国际化产品的人来说这能省掉大量方向相关的hack也让页面代码更接近“语义”而不是“物理方向”。7. 打地基的实战路线拆透能力而不是背属性说了这么多最后聊聊怎么把这些基础真正变成自己的东西。我带团队这几年见过很多新人拿着属性表背了两天一问flex: 1的完整含义还是答不上来。原因很简单没有把知识放到真实场景里验证。7.1 不要背属性而是做小原型我建议每个模块都做一个小实验页面不要一次性做完整项目而是做八个经典组件按钮、导航栏、卡片、表格、表单、弹层、骨架屏、标签。每个组件里主动用上刚才讲的几类能力比如卡片必须包含圆角、阴影、渐变、伪元素、flex和grid的嵌套。做完之后把属性改来改去对比版式变化你才能真正理解每个属性在完整上下文里的作用。7.2 在真实项目中渐进引入老项目重构时优先级可以这样排先把浮动布局替换成Flex和Grid再把零散的margin换成统一的gap最后根据目标浏览器情况逐步引入CSS变量、容器查询这类新特性。新项目可以直接从现代CSS起步但要先确认团队目标浏览器范围用caniuse查清楚每个特性在目标浏览器里的支持情况。不要只看一个网站用了某新特性就觉得可以全上实际项目的兼容底线得自己定。7.3 用浏览器DevTools指导学习我经常看到有人遇到样式覆盖问题时靠肉眼猜这是最浪费时间的。Chrome DevTools的Computed面板可以直接显示当前元素最终生效的样式来自哪条规则优先级问题一眼就能定位。Flex和Grid调试时布局面板能显示网格轨道、对齐参考线把grid-template-areas的每个区域直观显示出来上课讲一百遍不如打开面板看一次。真正常遇到“为什么这个元素没按我预想排列”的时候优先看布局面板而不是盲目改属性。7.4 几个“看起来会了实际踩坑”的案例有一些坑是几乎每个人都会遇到的我这里列四个最典型的。第一个是100vh在移动端的问题。移动端浏览器的地址栏会占据视口高度100vh会超出实际可见区域导致布局底部被遮挡。可以用100dvh动态视口高度来替代或者在结构上使用min-height: 100vh配合内容自适应。第二个是渐变不能直接过渡。前面提过background-image不支持transition如果要在两个渐变色之间做动画最省事的方案是用两个伪元素叠在一起改变透明度来切换不要让浏览器去插值计算background-image。第三个是overflow: hidden会裁掉box-shadow。圆角卡片里同时想保留阴影最简单的做法是给卡片外面包一个带内边距的父容器阴影画在那个父容器上。第四个是按钮的默认样式。浏览器不会自动帮你去掉button的背景色和边框在用a或div模拟按钮时还会遇到鼠标样式、键盘焦点等问题。我的习惯是一开始就在全局重置里加上button { border: 0; background: transparent; font: inherit; cursor: pointer; }再配合:focus-visible画焦点环比遇到一个坑修一个坑要省心很多。写到这里最后分享几个我现在固定的习惯每个新项目的样式文件夹里只保留reset、tokensCSS变量、base、components、pages这五层任何动效先问自己“这个动效有没有必要”再谈性能优化布局默认从Grid开始想只有内容确实是一维排列时才用Flex每引入一个新CSS特性先写一个最小片段验证再落到真实项目。我带团队时也基本不让新人背语法而是把这套拆解跑一遍。CSS这个领域属性是背不完的但底层的能力框架就那么几块你把它们拆透了后面遇到任何新花样都不会慌。