教程文档【免费下载链接】30-seconds-of-codeCoding articles to level up your development skills项目地址https://gitcode.com/gh_mirrors/30/30-seconds-of-code点击查看免费下载导读本文以 30-seconds-of-code 仓库中 10-css-background-patterns.md 为蓝本系统讲解 10 个纯 CSS、零图片资源的背景图案条纹、折线、波点、棋盘格、菱形、纸张、斜纹、三角、波浪、等轴测的完整实现代码与底层原理。读完本文你将掌握如何仅用linear-gradient、repeating-linear-gradient、radial-gradient与background-size/background-position的组合拼出可无限平铺的精致背景纹理并学会通过调整角度、色标与平铺尺寸自由定制图案。一、背景图案的核心原理渐变即纹理所有 10 个图案都基于同一个思想CSS 渐变本质上是一张可无限重复的图。把渐变当作背景图片配合background-size设定平铺单元tile的大小再用background-position让多个渐变层之间错位叠加就能组合出复杂的几何纹理。线性渐变linear-gradient(angle, color stops)沿指定方向逐色过渡是条纹、菱形、三角等色块切割图案的基础。色标位置可用px、%或关键字例如#5394fd 25%, transparent 25%表示颜色在 25% 处硬切硬切点从而产生锐利的图形边缘。重复线性渐变repeating-linear-gradient自动把渐变按等长周期重复适合需要大量重复线段的场景如棋盘格的两层斜纹代码比多个linear-gradient叠加更简洁。径向渐变radial-gradient从圆心向外扩散波点polka dot图案由此而来repeating-radial-gradient则用于波浪图案的同心波纹。平铺与对齐background-size: 24px 24px决定每个图案单元的大小多个背景层用逗号分隔各自的background-size、background-position独立设置实现错位叠加。background-repeat默认就是repeat无需额外声明原文档中部分示例显式写出。本文所有图案统一采用双色主色#5394fd蓝色与底色#fefefe近白色。其中波浪图案还使用了带 alpha 通道的#5394fd55实现半透明叠加效果——只要会写色值就能替换成任意配色。二、条纹图案Stripes最简单的一维纹理这是所有图案中最直观的一种把一段 24px 宽的蓝-白-蓝-白渐变作为平铺单元横向无限重复。.lines-2 { background-color: #fefefe; background-image: linear-gradient( to right, #5394fd, #5394fd 12px, #fefefe 12px, #fefefe ); background-size: 24px 100%; }原理拆解background-size: 24px 100%让渐变单元宽 24px、高占满容器单元内前 12px 为蓝色色标#5394fd到#5394fd 12px后 12px 跳为白色#fefefe 12px到#fefefe。background-color兜底即使图案加载失败也能保持白色底色。定制要点条纹宽度 12px 色标位置 × 2若想要更细/更宽的条纹同步修改色标位置与background-size即可。改成to bottom或45deg即可获得横纹或斜纹变体。三、锯齿形图案Zig Zag四层三角叠加锯齿形是用三角形拼出折线的经典套路4 个 45° 方向的线性渐变各自切出 25% 的三角形色块再用background-position让上下两层错位 24px形成连续的锯齿边缘。.zigzag { background-color: #fefefe; background-image: linear-gradient(135deg, #5394fd 25%, transparent 25%), linear-gradient(225deg, #5394fd 25%, transparent 25%), linear-gradient(45deg, #5394fd 25%, transparent 25%), linear-gradient(315deg, #5394fd 25%, #fefefe 25%); background-position: 24px 0, 24px 0, 0 0, 0 0; background-size: 48px 48px; background-repeat: repeat; }原理拆解135deg、225deg、45deg、315deg四个方向各切出一个三角形色标25%处从蓝到透明硬切。前两层在24px 0位置、后两层在0 0位置水平错位半个平铺单元48px 的一半让两排三角形犬牙交错。第 4 层用#fefefe 25%而非transparent是为了把剩余区域填成白色底与background-color保持一致。四、波点图案Polka Dot径向渐变切圆波点只需一行渐变径向渐变的两个色标紧紧相邻1.2px处硬切出一个实心圆点其余区域为白色。.polka { background-color: #fefefe; background-image: radial-gradient(#5394fd 1.2px, #fefefe 1.2px); background-size: 24px 24px; }原理拆解radial-gradient默认以元素中心为圆心向外扩散色标#5394fd 1.2px到#fefefe 1.2px之间没有过渡区间形成半径 1.2px 的硬边圆点。background-size: 24px 24px决定了圆点间距。定制要点圆点大小改1.2px间距改background-size把radial-gradient换成radial-gradient(circle at ...)可移动圆点位置。五、棋盘格图案Checkerboard两层斜纹错位棋盘格是两层 45° 重复线性渐变的组合每层先切出 45° 的斜条纹第二层再水平垂直错位 24px两层叠加后便形成黑白交错的方格。.rectangles { background-color: #fefefe; background-image: repeating-linear-gradient( 45deg, #5394fd 25%, transparent 25%, transparent 75%, #5394fd 75%, #5394fd ), repeating-linear-gradient( 45deg, #5394fd 25%, #fefefe 25%, #fefefe 75%, #5394fd 75%, #5394fd ); background-position: 0 0, 24px 24px; background-size: 48px 48px; }原理拆解第一层是蓝-透明-透明-蓝的 45° 重复条纹蓝色占 25%–75% 之外的两段第二层是蓝-白-白-蓝的同款条纹。第二层在background-position: 24px 24px处错位半个周期48px 的一半两层的蓝色区域恰好互补、白色区域恰好重叠拼出棋盘格。值得注意的是该文档在目录中被归类为 cheatsheet且在 redirects.yaml 中承接了原checkerboard-pattern等旧页面301 重定向可见这是对既有多个零散图案示例的整合。六、菱形图案Rhombus紧凑版锯齿菱形与锯齿形结构完全相同唯一区别是background-size从48px 48px收紧为24px 24px——平铺单元变小后错位叠加的三角形组合出的是更密集的菱形纹理。.rhombus { background-color: #fefefe; background-image: linear-gradient(135deg, #5394fd 25%, transparent 25%), linear-gradient(225deg, #5394fd 25%, transparent 25%), linear-gradient(45deg, #5394fd 25%, transparent 25%), linear-gradient(315deg, #5394fd 25%, #fefefe 25%); background-position: 24px 0, 24px 0, 0 0, 0 0; background-size: 24px 24px; background-repeat: repeat; }原理拆解4 层渐变的方向与锯齿形完全一致但平铺单元缩小一半后24px 的错位量恰好等于整个单元宽度四层三角形的边界在更小尺度上闭合形成菱形的外轮廓。同一个渐变配方只改background-size视觉形态就从锯齿变成菱形——这是本系列最有教学价值的对比。七、纸张图案Paper四层网格叠加纸张纹理由 4 层线性渐变叠加两层粗网格120px线宽 4.8px 两层细网格24px线宽 2.4px粗线描边、细线打点模拟格纹纸效果。.paper { background-color: #fefefe; background-image: linear-gradient(#5394fd 4.8px, transparent 4.8px), linear-gradient(90deg, #5394fd 4.8px, transparent 4.8px), linear-gradient(#5394fd 2.4px, transparent 2.4px), linear-gradient(90deg, #5394fd 2.4px, #fefefe 2.4px); background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px; background-position: -4.8px -4.8px, -4.8px -4.8px, -2.4px -2.4px, -2.4px -2.4px; }原理拆解前两层是水平默认方向与垂直90deg的粗线后两层是细线background-size分别定义两组网格密度。关键细节在background-position的负值偏移-4.8px -4.8px把网格向左上平移半个线宽使线恰好落在平铺单元的边界上而非被裁掉保证跨单元线条连续无缝。这是本系列中background-position用法最精妙的一例。八、斜纹图案Diagonal最省代码的单层条纹斜纹是 10 个图案里代码最短的一条repeating-linear-gradient即可完成连background-size都不需要——重复渐变自带周期性。.diagonal { background-color: #fefefe; background: repeating-linear-gradient( 45deg, #5394fd, #5394fd 12px, #fefefe 12px, #fefefe 60px ); }原理拆解45° 方向、12px 蓝 48px 白12px 到 60px为一个周期repeating-linear-gradient自动沿 45° 方向无限延伸。注意此处background-color之后又用background简写覆盖后者会重置之前的背景设置——实际使用时二选一即可简写形式更紧凑但会清空background-image之前的其他背景层叠图场景需谨慎。九、三角图案Triangles单层渐变切半三角图案同样极简一个 45° 线性渐变色标在 50% 处硬切一半蓝、一半白再以 24px 平铺。.triangle { background-color: #fefefe; background-image: linear-gradient(45deg, #5394fd 50%, #fefefe 50%); background-size: 24px 24px; }原理拆解45deg对角线把每个 24×24 单元切成两个等腰直角三角形左上半蓝、右下半白。若将50%调整为其他百分比三角形比例随之改变——百分比色标是控制图形占空比的核心旋钮。十、波浪图案Waves径向重复渐变叠加透明层波浪是本系列视觉层次最丰富的一个repeating-radial-gradient生成同心波纹repeating-linear-gradient生成渐变底色两层叠加出柔和的波浪质感。其中半透明色#5394fd5555为十六进制 alpha ≈ 33% 不透明度让上层蓝调透出下层纹理。.wavy { background-color: #fefefe; background-image: repeating-radial-gradient( circle at 0 0, transparent 0, #fefefe 24px ), repeating-linear-gradient(#5394fd55, #5394fd); }原理拆解第一层以容器左上角circle at 0 0为圆心从透明到白色每 24px 重复一次产生一圈圈向外扩散的波纹第二层是蓝色系的重复线性渐变。两层都是重复渐变无需background-size也能无缝铺满。把24px调小可获得更密的波纹#5394fd55的 alpha 值则控制波浪的深浅。十一、等轴测图案Isometric六层渐变拼三维错觉最复杂的图案6 层线性渐变、3 组角度30°、150°、60°、两组错位共同拼出等轴测isometric风格的立方体堆叠错觉。这与仓库中 isometric-card.md 所讲的等轴测视角视觉语言一脉相承——前者用transform: rotateX() rotateZ()塑造立体卡片这里则用多层渐变在背景上画出立体感。.isometric { background-color: #fefefe; background-image: linear-gradient( 30deg, #5394fd 12%, transparent 12.5%, transparent 87%, #5394fd 87.5%, #5394fd ), linear-gradient( 150deg, #5394fd 12%, transparent 12.5%, transparent 87%, #5394fd 87.5%, #5394fd ), linear-gradient( 30deg, #5394fd 12%, transparent 12.5%, transparent 87%, #5394fd 87.5%, #5394fd ), linear-gradient( 150deg, #5394fd 12%, transparent 12.5%, transparent 87%, #5394fd 87.5%, #5394fd ), linear-gradient( 60deg, #5394fd77 25%, transparent 25.5%, transparent 75%, #5394fd77 75%, #5394fd77 ), linear-gradient( 60deg, #5394fd77 25%, transparent 25.5%, transparent 75%, #5394fd77 75%, #5394fd77 ); background-size: 48px 84px; background-position: 0 0, 0 0, 24px 42px, 24px 42px, 0 0, 24px 42px; }原理拆解前三组渐变30°、150° 各两组负责立方体的三个可见面中的亮面用12%/87.5%的极窄硬切区间12% 到 12.5%、87% 到 87.5%切出细而锐利的棱线后两组 60° 渐变用半透明蓝#5394fd77填充暗面增强立体层次。关键参数background-size: 48px 84px是非正方形平铺单元高度 84px配合background-position中的24px 42px错位宽高各一半让棱线在单元边界处精确衔接。60° 角的渐变在这里承担了暗面宽度的角色与 30° 的亮面棱线配合营造出三维立方体的光影。十二、实战定制指南1. 换色把#5394fd换成你的品牌色#fefefe换成背景色即可。半透明层#5394fd77、#5394fd55可改用任意rgba()值例如rgba(83, 148, 253, 0.47)便于直观控制透明度。2. 调尺寸图案密度由background-size决定尺寸越大图案越稀疏。修改大小时务必同步检查background-position的错位值是否仍等于单元尺寸的一半否则图案会在平铺边界处接缝断裂纸张、菱形、等轴测图案尤其敏感。3. 调角度与占空比改变渐变的deg值可旋转整体纹理方向调整百分比色标如25%→30%可改变色块占比。注意百分比与角度是互相耦合的改了角度往往也要微调百分比才能保持图案美观。4. 叠加与降级多个背景层按书写顺序从上往下叠加最上层最先绘制background-color永远作为最底层兜底即使渐变失效也不会出现透明背景。十三、性能与使用建议零图片、零请求全部图案由 CSS 渐变即时绘制不产生额外 HTTP 请求、不增加页面体积适合作为骨架屏、卡片底色、Hero 区装饰或代码演示区背景。重复渐变优先需要大量等距线段时用repeating-linear-gradient/repeating-radial-gradient替代多层linear-gradient代码更短、可维护性更好。本仓库内的实践参照同类纯 CSS 视觉技巧可对照 25-css-gradients.md25 个渐变配色与 shapes.md纯 CSS 几何形状一起查阅本文档在仓库中位于 CSS Visual 集合visual.yamltag 为visual, cheatsheet可直接以速查表方式使用。结语从单层渐变的条纹、三角到六层渐变的等轴测立方体这 10 个图案完整覆盖了 CSS 渐变背景的主流技法线性/径向/重复渐变的搭配、色标硬切、平铺单元尺寸与错位对齐。理解这些原理后你不仅能直接复制使用更能按需组合出自己的无限图案。若想探索更多MagicPattern 的完整集合与本仓库的 CSS 视觉文章集合 都是不错的延伸参考。赞分享教程文档【免费下载链接】30-seconds-of-codeCoding articles to level up your development skills项目地址https://gitcode.com/gh_mirrors/30/30-seconds-of-code点击查看免费下载相关推荐如何为free-llm-api-resources添加API文档生成如何为free llm api resources添加API文档生成 free llm api resources是一个收集免费LLM推理API资源的开源项目大模型人工智能模型推理服务知识库30-seconds-of-code CSS 速查25 款开箱即用的渐变配色方案30 seconds of code CSS 速查25 款开箱即用的渐变配色方案 本文是 30 seconds of code 仓库 25 css gradi教程文档30-seconds-of-code 实战用纯 CSS 打造可复用的自定义 Checkbox 与 Radio Button30 seconds of code 实战用纯 CSS 打造可复用的自定义 Checkbox 与 Radio Button 浏览器原生的复选框checkbo教程文档创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考