这段时间一直在继续学习CSS3对HTML的美化起因特别简单HTML标签我基本上都见过了结构也能搭得有模有样但页面一到别人手里就比我做的好看明明内容差不多差距全在观感上。后来我才彻底想明白HTML管的是“骨骼”CSS3管的是“皮相”真正决定一个网页好不好看的就是这层美化功夫。这篇文章就是我的学习记录也写给刚学完HTML、准备继续往CSS3方向走的朋友。我会把关键知识点、几个可以直接抄的案例、还有我踩过的坑都整理出来你看完至少能做出一个像样的卡片页和一个节日祝福页顺带学会数字滚动递增这种小炫技。1. 先搞清楚CSS3到底能帮HTML做什么1.1 HTML负责结构CSS3负责观感用装修来类比最直观HTML是你房子里的墙体、承重柱和隔断决定房间怎么分、门往哪开CSS3是刷墙、铺地板、装灯、配家具决定这个房子住起来舒不舒服、看起来有没有品味。毛坯房照样能住但绝大多数人不会喜欢天天住毛坯房。具体到页面上同样的一个div不写CSS就是黑字白底的一坨写了border-radius就变成圆角卡片写了box-shadow就有了悬浮层次写了background: linear-gradient(...)立刻从白底变成有设计感的渐变背景。CSS3能把同一段HTML完全变成两种气质这就是“美化”两个字的核心价值。1.2 CSS3相比老版CSS的升级点这里说的老版主要是CSS 2.1。早年做前端有个说法能用图片解决的绝不用CSS因为当时CSS能做的东西太有限。CSS3普及之后很多以前要靠切图、拼背景才能实现的效果现在一行属性就搞定了。我整理了一个粗略对比方便你建立整体印象效果CSS 2.1时代CSS3时代圆角只能用背景图片拼四个角border-radius一行搞定渐变提前用PS做整张背景图linear-gradient、radial-gradient动态生成阴影几乎只能靠图片模拟box-shadow、text-shadow过渡动效用JS定时器切换样式啰嗦又不流畅transition、keyframes animation垂直居中各种hack比如positionmargin负值Flexbox的align-items: center复杂二维布局float加clear噩梦级display: grid响应式适配基本靠JS判断屏幕宽度media媒体查询自定义字体只能依赖系统字体font-face引入网页字体看到这张表你就明白了CSS3不是简单的“新增几个属性”而是把从前需要大量额外资源才能完成的视觉效果压缩成了几行样式。现在的HTML美化绕不开CSS3不是因为它热门而是因为它真的把做视觉效果的门槛拉低了一大截。1.3 入门阶段的学习重点和顺序建议CSS3的官方文档和教程动辄几百页但入门阶段不用全部啃完我建议按这个顺序走每一步都能直接用在页面上第一步先把选择器吃透。选择器是CSS的入口你连“改哪里”都不知道后面的布局和动效都是空谈。第二步学盒模型和flex布局。盒模型决定每个元素占多大地方flex决定多个元素怎么排列这两块搞定页面结构基本就稳了。第三步学颜色、渐变、阴影。这三样决定页面有没有“设计感”也是普通人看一个页面“好不好看”最直观的部分。第四步学过渡和动画。这是CSS3的加分项一个hover过渡、一个关键帧动画能让页面一下子活起来。最后再补上媒体查询和响应式知识。现在手机浏览网页的比例非常高不考虑移动端等于做出来的页面有一半用户看不清。后面案例部分我也是按这个顺序安排的。2. 新手最容易忽略但美化必用的四个CSS3知识点2.1 选择器、伪类和伪元素选择器没什么玄乎的就是告诉浏览器“我要改页面上哪一块”。类选择器.card、ID选择器#header、元素选择器p、后代选择器.wrap p、子选择器.wrap p这些属于基础中的基础。真正让美化效率起飞的是伪类和伪元素。伪类最常用的是:hover鼠标悬停时触发样式做按钮、卡片反馈基本都靠它。还有:active鼠标按下的瞬间、:focus输入框聚焦、:first-child和:nth-child(2n)这种按位置选元素的写法做列表隔行变色、菜单高亮都非常方便。伪元素::before和::after是美化利器它们可以在不额外写HTML标签的情况下给元素增加装饰。比如给卡片顶部加一条彩色横条不用专门写一个div直接在CSS里用.card::before画出来就行。提示开发中常见缩写是单冒号::before写作:before在部分老浏览器里能用但标准写法是双冒号从学习阶段就养成用双冒号的习惯最好。2.2 盒模型、Flex和Grid盒模型理解起来很简单每个元素都是一个矩形盒子从内到外是content、padding、border、margin。真正坑人的是box-sizing这个属性。默认的content-box模式下你给一个元素设width: 100%再给它加padding: 20px它实际占的宽度是100%加40px页面直接出现横向滚动条。所以现在业界普遍的做法是开头写一段* { margin: 0; padding: 0; box-sizing: border-box; }这句重置样式我建议所有项目都加上。border-box的意思是width包含padding和border后面再算宽度就完全不用担心被撑破。Flexbox解决的是排列问题。一个容器设置display: flex里面的子元素就自动进入弹性布局模式。最常用的三件套justify-content: center水平方向居中align-items: center垂直方向居中flex-direction: column改成纵向排列只要有这三个页面垂直水平居中的问题迎刃而解不用再费劲写position加负边距。Grid更强大一些适合做二维布局比如商品列表用grid-template-columns: repeat(3, 1fr)就能平均分成三列比flex再套一层要干净。2.3 颜色、渐变和阴影颜色这块我建议优先掌握十六进制和rgba两种写法。十六进制比较常用比如#666。rgba的好处是最后一个参数控制透明度rgba(0, 0, 0, 0.3)。我特别想提醒的是尽量别用opacity来做整体透明因为opacity会连子元素一起变透明而rgba只影响当前元素的背景色。渐变是CSS3里最有设计感的特性之一。最简单的写法background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);第一个参数是角度135deg是从左下到右上后面是颜色和位置0%、100%表示渐变起点和终点。你改两个颜色就能得到完全不同气质的背景。radial-gradient是径向渐变从圆心向外扩散做月亮、光斑效果特别好用。阴影分两种box-shadow负责元素投影text-shadow负责文字投影。box-shadow的完整参数是这样的box-shadow: 水平偏移 垂直偏移 模糊半径 扩散半径 颜色 内阴影例如box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12)表示水平不偏移、向下偏移10px、模糊30px、不扩散、浅黑色。想做出卡片悬浮感这种柔和阴影是最直接的办法。配色方面新手最容易犯的错是颜色太杂。我的建议是一个页面的主色不要超过三种大面积背景用高级灰或浅色主按钮和高亮文字用品牌色正文用深灰。这样即使设计感不强整体也会显得干净。2.4 过渡与动画transition是过度的意思它需要事件触发最常见的触发条件是:hover。它的四个参数是transition-property哪些属性参与过渡、duration时长、timing-function缓动曲线、delay延迟。写起来通常是.card { transition: transform 0.3s ease, box-shadow 0.3s ease; } .card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18); }有个特别关键的细节transition要写在元素的初始状态上不是写在:hover状态里。写在初始状态意味着鼠标移入和移出都有过渡效果写在:hover里只有鼠标移入有过渡移出会瞬间弹回观感很差。animation和keyframes是另一套机制。keyframes定义动画的关键帧animation负责引用并控制播放keyframes float { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } } .element { animation: float 3s ease-in-out infinite; }什么时候用哪个用户交互引起的状态变化优先用transition比如按钮悬停页面自己持续运动的效果用animation比如loading转圈、飘落的星星。另外性能上有个小常识能用transform和opacity做动画就别用width、height、top这些属性因为这些属性变化会引起整页重排而transform只做合成流畅度完全不同。3. 四个能直接抄的CSS3美化案例3.1 卡片式布局一个页面最常见的组成单元卡片是电商、后台、博客里最常见的页面单元一个漂亮的卡片能撑起整个页面颜值。我写了一个商品卡片核心CSS就是圆角、阴影、渐变和hover上浮!DOCTYPE html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title卡片式产品展示/title style * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: PingFang SC, Microsoft YaHei, sans-serif; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center; } .card { width: 320px; border-radius: 16px; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18); } .card-img { height: 180px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } .card-body { padding: 24px; } .card-title { font-size: 20px; margin-bottom: 8px; } .card-desc { font-size: 14px; color: #666; line-height: 1.6; } .card-price { font-size: 24px; color: #e5484d; font-weight: 700; margin-top: 12px; } .card-btn { display: inline-block; margin-top: 12px; padding: 8px 20px; border-radius: 20px; background: linear-gradient(90deg, #667eea, #764ba2); color: #fff; text-decoration: none; font-size: 14px; transition: opacity 0.2s, transform 0.2s; } .card-btn:hover { opacity: 0.9; transform: scale(1.03); } /style /head body div classcard div classcard-img/div div classcard-body h3 classcard-title极简机械键盘/h3 p classcard-desc87键布局热插拔轴体支持全键自定义灯效办公游戏两不误。/p p classcard-price¥299/p a href# classcard-btn立即购买/a /div /div /body /html这个案例里有两个细节值得说。第一body用了display: flex; justify-content: center; align-items: center;配合min-height: 100vh卡片在任何屏幕上都是水平垂直居中的不用再手算边距。第二.card的transition写了transform和box-shadow两个属性hover时卡片上浮的同时阴影加深视觉上就像卡片真的“离开桌面”了这个组合是卡片hover的经典配方。border-radius: 16px这个数值可以多试验几次12到20px之间比较耐看。overflow: hidden一定不能省它让图片区、按钮等内容的边角被裁切到圆角里面否则背景色会溢出方角整张卡片会显得很糙。3.2 节日祝福页中秋/生日/表白通用改文字模板每年中秋、情人节前后都会有很多人搜索“中秋祝福html”“生日代码html”“表白代码html”。这类页面其实可以做成一个通用模板深色渐变背景、发光圆月、文字光晕、星星飘落只要改中间的文字和配色就能从“中秋快乐”变成“生日快乐”变成“我爱你”。!DOCTYPE html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title节日祝福/title style * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; display: flex; justify-content: center; align-items: center; background: linear-gradient(180deg, #0b1b3d 0%, #1b2f5e 60%, #2e4376 100%); font-family: FZKai, KaiTi, serif; overflow: hidden; } .scene { text-align: center; } .moon { width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle at 60% 40%, #fffbe6, #f0d57a); box-shadow: 0 0 40px rgba(255, 240, 180, 0.8), 0 0 120px rgba(255, 240, 180, 0.4); margin: 0 auto; } .blessing { margin-top: 40px; font-size: 30px; color: #ffefb0; text-align: center; letter-spacing: 6px; text-shadow: 0 0 10px rgba(255, 200, 100, 0.8), 0 0 30px rgba(255, 200, 100, 0.5); } .stars .star { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff; animation: fall 4s linear infinite; } .stars .star:nth-child(1) { left: 10%; animation-delay: 0s; } .stars .star:nth-child(2) { left: 30%; animation-delay: 1.2s; } .stars .star:nth-child(3) { left: 50%; animation-delay: 2.4s; } .stars .star:nth-child(4) { left: 70%; animation-delay: 0.8s; } .stars .star:nth-child(5) { left: 90%; animation-delay: 2s; } keyframes fall { 0% { transform: translateY(-10vh) translateX(0); opacity: 1; } 100% { transform: translateY(110vh) translateX(-30px); opacity: 0; } } /style /head body div classscene div classmoon/div p classblessing月圆人团圆中秋快乐/p /div div classstars div classstar/div div classstar/div div classstar/div div classstar/div div classstar/div /div /body /html月亮是radial-gradient加box-shadow做出来的。radial-gradient(circle at 60% 40%, #fffbe6, #f0d57a)让月亮中心偏亮、边缘偏黄有个球体感两层box-shadow一层近、一层远模拟月光晕开的效果。文字光晕用的是text-shadow同样写了两个阴影值第一层近光强第二层远光弱。星星飘落用的是keyframes fall从translateY(-10vh)落到translateY(110vh)配合opacity从1变0视觉上就是星星从屏幕上方落到下方后消失。animation-delay让每颗星开始的时间错开形成不同步的下落节奏。想做成生日主题把背景改成暖粉色渐变、月亮换成蛋糕图标或蜡烛光效、文字改成“生日快乐”就行想做成表白页把背景改成红色系、文字改成表白语句本质都是这套模板。3.3 数字滚动递增元素可见时自动展现这个效果经常在网站统计数据区看到用户滚动到“累计用户”那一栏时数字会从0快速跳到目标值。很多人以为这是CSS3的功劳实际上需要一个很轻量的JS接口配合CSS3负责数字的视觉呈现和滚动触发前的布局状态JS负责监听滚动位置并驱动数字变化。!DOCTYPE html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title滚动数字递增/title style * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: PingFang SC, sans-serif; } .trigger { height: 100vh; display: flex; justify-content: center; align-items: center; font-size: 22px; color: #999; } .stats { height: 100vh; display: flex; justify-content: center; align-items: center; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); } .num { font-size: 64px; font-weight: 700; color: #333; } /style /head body div classtrigger向下滚动触发数字动画/div div classstats span classnum>!DOCTYPE html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title一键返回顶部/title style * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { height: 200vh; font-family: PingFang SC, sans-serif; background: linear-gradient(180deg, #f5f7fa 0%, #c3cfe2 100%); } #backTop { position: fixed; right: 24px; bottom: 40px; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; text-align: center; line-height: 44px; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); opacity: 0; pointer-events: none; transition: opacity 0.3s; font-size: 14px; } #backTop.show { opacity: 1; pointer-events: auto; } /style /head body div idbackTopTOP/div script const btn document.getElementById(backTop); window.addEventListener(scroll, function () { if (window.scrollY 400) { btn.classList.add(show); } else { btn.classList.remove(show); } }); btn.addEventListener(click, function () { window.scrollTo({ top: 0, behavior: smooth }); }); /script /body /html第5.3节里会提到的data:text/html可以配合这个演示直接在浏览器地址栏跑一遍。先说实现逻辑window.scrollY 400时给按钮加.show类按钮的opacity从0变为1配合transition: opacity 0.3s做了一个淡入淡出pointer-events: none到auto的切换非常关键否则按钮在透明状态下还是会挡住下面的页面点击。点击按钮时window.scrollTo({ behavior: smooth })把页面平滑滚回顶部这行代码其实是HTML文档里scroll-behavior: smooth的兜底写法两者任选其一都能达到平滑滚动效果。position: fixed让按钮始终固定在视口右下角不受页面滚动影响这是滚动类按钮和悬浮导航最常用的定位方式。4. 写页面时我踩过的五个典型坑照着排查就完事4.1 CSS没生效先按这四步排查写了几行样式刷新页面纹丝不动这是新手的头号问题。我自己的排查顺序一般是这样第一确认CSS文件有没有被正确引用。link relstylesheet hrefcss/style.css里的路径以当前HTML文件位置为基准多一个./、少一个../都会导致加载失败。不确定的时候按F12打开控制台看Network面板里CSS文件是200还是404。第二强制刷新。浏览器会缓存CSS文件改完样式刷新没反应很多时候是缓存作怪按CtrlF5或加个版本号参数style.css?v2就能解决。第三检查选择器优先级。一个元素同时被.card和.card.active命中时后者优先级更高。如果不知道哪里被覆盖了在DevTools里选中元素看Styles面板里哪条样式被划掉了。第四看是不是层叠顺序问题。后写的同名样式会覆盖先写的两个文件同级别时靠后的link生效。!important能暴力提升优先级但我不建议新手用。它会让后续排查变得痛苦用了它之后你再想覆盖这条样式就得再用一个!important很容易形成死循环。4.2 元素不居中别跟vertical-align死磕我见过太多人在垂直居中这件事上浪费几个小时。先把概念理清楚text-align: center只对行内元素生效你想让一个div里的文字居中写在父级上才有用margin: 0 auto只对块级元素生效并且要求元素有确定宽度vertical-align只对行内元素和表格单元格生效对普通的div基本无效。最省心的居中方案就是flex.parent { display: flex; justify-content: center; align-items: center; }父级设了flex之后子元素无论大小水平垂直都居中。这个方法在99%的场景里都够用别再折腾position: absolute; top: 50%; margin-top: -高度的一半那套了。还有个经验如果你的元素是span、a、i这种行内元素想让它体现宽高先加display: block或display: inline-block否则设置width、height、line-height垂直居中都不会生效。4.3 margin明明写对了间距却超出预期有个非常经典的现象父元素和子元素都设置了margin-top你会发现最终的外边距不是两者相加而是取其中较大的那一个这就是margin合并。比如div classparent stylemargin-top: 30px; div classchild stylemargin-top: 40px;/div /div实际效果是整块往下移了40px而不是70px。这个问题在排查页面间距异常时非常常见父子元素的顶部边距会“塌陷”成一个大值。解决方案我列几种任选一个都行父元素加padding-top不用子元素的margin父元素加border: 1px solid transparent父元素设overflow: hidden更推荐父元素直接改成display: flex布局子元素的margin表现会正常很多做页面布局时我建议养成一个习惯优先用padding和flex的gap来拉开间距而不是一味依赖margin。gap是配合flex和grid非常实用的属性写在容器上子元素之间自动产生间距不需要挨个设margin。4.4 动画不动先查触发条件和关键帧写transition和animation没反应多半是下面三个问题之一。Transition不动的第一类是缺少触发条件。transition本身只是一个“过渡规则”它不会自己去改变元素必须配合:hover、class切换或者JS修改样式来触发。如果你只是定义了transition: all 0.3s但没有任何状态变化页面当然纹丝不动。Animation不动的第一类是keyframes名字拼错。CSS里animation: float 3s对应keyframes float大小写、拼写必须完全一致。这类错误控制台不会给你报错只能检查代码。第二类是用了不可动画的属性。display: none到display: block之间没有过渡效果它是瞬间切换的。想要平滑展开折叠可以用opacity配合visibility或者用max-height渐变又或者用transform: scale做缩放效果。height、width虽然能过渡但会触发重排性能不太好能用transform尽量用transform。另外提一句will-change这个提升性能的属性。它确实能让动画更流畅但在元素上长挂会占用系统资源建议只在动画开始前加结束就移除新手阶段其实不太需要刻意用。4.5 手机上一塌糊涂多半是viewport没写对很多页面在电脑上怎么看都正常一放到手机就变成一坨缩小的马赛克。原因非常统一HTML文档头部的viewport meta标签没写或者写错。就是这一行meta nameviewport contentwidthdevice-width, initial-scale1.0早期网页是为电脑屏幕设计的手机浏览器为了兼容默认按一个虚拟的980px宽度渲染页面然后再整体缩小。这行标签的作用是告诉手机浏览器不要用默认虚拟宽度直接把页面的宽度对齐设备宽度并且初始缩放比为1。没有它移动端的一切适配都无从谈起。接下来才是CSS层面的事。入门阶段先掌握两个基本点一是布局用弹性单位和flex配合flex-wrap: wrap不要写死固定宽度二是用媒体查询在窄屏下调整布局media (max-width: 600px) { .card-list { grid-template-columns: 1fr; } }这句话的意思是在屏幕宽度不超过600px时把原本的多列布局改成单列。做响应式最忌讳的是先做完桌面版再去“补”移动端更顺滑的做法是从一开始就用flex和相对单位再通过媒体查询做精细调整。5. 该装什么工具、文件怎么组织顺便聊聊懒人预览技巧5.1 编辑器怎么选一个VSCode基本通吃总有人问Ubuntu下有没有好用的HTML编辑器其实各平台的情况差不多Visual Studio Code是现在综合体验最好的选择Windows、macOS、Linux全都有官方版本我长期在Linux下写前端也一直用VSCode。它内置HTML、CSS、JavaScript语法高亮开箱即用再装一个Live Server插件右键就能在浏览器里实时预览页面改一个字符、刷新一下立刻看到效果比每次手动开浏览器效率高出一大截。Sublime Text也可以轻量、启动快适合老机器。用Vim或Neovim更偏极客能花式操作但学习成本高。对新手来说没必要去折腾选VSCode可以减少很多无关干扰。编辑器里我建议顺手打开“自动保存”功能再开启Live Server这样每一次CtrlS保存浏览器会自动白屏刷新形成“改样式-看效果-再改样式”的快速反馈循环。学CSS3最吃这种即时反馈反馈越快掌握越快。5.2 DevTools是学CSS3最快的老师浏览器按F12打开的开发者工具里Elements面板是我用的最多的它和CSS3美化是绝配。在Elements面板里左边选中一个元素右边Styles面板会列出它所有的样式规则。你可以直接点击修改数值比如把border-radius从16px改成30px页面瞬间变化满意了再复制回代码文件。这个流程比在代码里改一次、切回浏览器刷一次快太多了而且能直观看到每个属性影响的是哪一块。Computed面板也很实用。它显示元素经过所有样式计算后的最终值。遇到样式没生效、被覆盖的情况直接在Computed里看哪些属性被划掉再顺着上方的Styles面板找到是哪条规则覆盖的。我以前排查样式冲突全靠这里基本不用瞎猜。调试移动端布局可以用DevTools左上角的设备模拟按钮或者直接按CtrlShiftM切到设备模式页面会模拟成手机屏幕宽度这时候就能快速验证第4.5节讲的viewport和媒体查询是否生效。5.3 data:text/html地址栏快速预览有一个很冷门但好用的技巧在浏览器地址栏直接输入data:text/html,后面跟上一段HTML代码浏览器会直接把它渲染成一个页面。比如data:text/html,h1 stylecolor:redhelloworld/h1这个方法特别适合验证一个极小的HTML片段不用开编辑器、不用保存文件。注意两点一是逗号前是协议说明逗号后才是HTML内容二是中文和特殊符号最好用encodeURIComponent转码不然容易乱码。复杂项目肯定不这么干但对“突然想试一个CSS属性长什么样”的场景这个技巧真的够快。5.4 多个HTML页面的文件组织和样式复用热词里有人搜“打包多个html”其实入门阶段完全不需要整构建工具。多个页面用传统的目录结构就够project/ ├── index.html ├── about.html ├── css/ │ └── style.css └── js/ └── main.js每个HTML页面通过link relstylesheet hrefcss/style.css引用同一个CSS文件。这样公共样式只维护一份改一个文件全站生效这就是“样式复用”最基本的形态。多个页面的公共头部、页脚如果也想复用新手阶段可以直接复制粘贴等页面多了再学组件化或者引入模板工具。后面如果项目真的做大了比如几十个HTML共享导航栏和公共头尾可以考虑用Vite这类构建工具做模板拼接、压缩合并再把多个HTML一起打包出来。但这是另一个阶段的事一开始就把工具链拉得太复杂反而会被环境配置拖垮学习节奏。我个人学到这里的感受是CSS3不要死记硬背最好用的办法是“抄”。这里的抄不是复制粘贴交差而是找一个你觉得好看的页面把它关键样式自己敲一遍每敲一行就想一下这个属性为什么放在这里改一下数值会发生什么。我抄到第三个页面的时候flex、阴影、渐变这些搭配基本就熟了。最后再分享一个小技巧写页面先把背景色、字体、间距这些“底子”打好再去叠阴影和动画层次感会清晰很多调试时也更省心。希望这篇记录能让你少走点弯路写出自己看着顺眼、别人看着羡慕的页面。