[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"article-css学习笔记":22,"footer-socials":42,"comments-css学习笔记":43},{"site_title":4,"site_subtitle":5,"home_intro":6,"avatar":7,"seo_keywords":8,"seo_description":9,"site_subtitle_highlight":10,"home_description":11,"about_name":12,"about_intro":13,"code_comment_2":14,"code_log":15,"code_skills":16,"code_goal":17,"code_comment_1":18,"meteor_density":19,"meteor_max_count":19,"meteor_enabled":20,"meteor_speed":21},"ShineGoldYao","架构代码，","全栈开发者 \u002F 开源爱好者 \u002F 技术探索者","https:\u002F\u002Fforuda.gitee.com\u002Favatar\u002F1762402862010015318\u002F16382196_yaoxingjin_1762402861.png!avatar200","ShiGoldYao,技术博客,全栈开发","专注于前沿技术分享与开源项目展示的个人技术博客","书写未来。","大家好，我是 ShiGoldYao。一名全栈学习与技术爱好者。在这里，我分享关于现代 Web 开发、技术框架学习记录以及极客生活的深度思考。","ShiGoldYao","我是一名全栈技术学习者，对构建高性能、可扩展的现代 Web 应用充满热情。过去一年里，我从初识互联网前后端开发，到逐步沉淀技术体系，始终保持着对前端、后端与工程化的持续探索。\n\n我坚信 “代码如诗”。除了日常学习与项目实践，我也会花大量时间关注开源社区，尝试摸索 WebAssembly、Rust 等前沿技术在浏览器端的更多可能，不断挑战性能与体验的边界。\n\n生活里的我并不只有代码：闲暇时会打打永劫无间，享受博弈与操作的快感；也喜欢打乒乓球，在运动中放松自己；当然，最幸福的时光，还是和女朋友一起慢慢生活、认真恋爱。","\u002F\u002F 🚀 开启学习之旅","","Vue , TypeScript , Nest , Mysql","成为优秀的前端全栈工程师","\u002F\u002F 欢迎来到我的技术世界","3","true","5",{"id":19,"title":23,"slug":24,"coverUrl":15,"summary":24,"content":25,"htmlContent":26,"categoryId":27,"viewCount":28,"likeCount":29,"isTop":29,"isPublish":30,"seoKeywords":15,"seoDescription":15,"publishTime":31,"createTime":32,"updateTime":33,"deleteTime":34,"category":35,"tags":41},"CSS 学习笔记","css学习笔记","# CSS 学习笔记\n\n> 专为前端工程师设计的 CSS 基础与进阶学习笔记\n\n---\n\n## 目录\n\n- [一、CSS 简介](#一css-简介)\n- [二、CSS 基础语法](#二css-基础语法)\n- [三、选择器](#三选择器)\n- [四、文本样式](#四文本样式)\n- [五、盒模型](#五盒模型)\n- [六、布局](#六布局)\n- [七、背景与边框](#七背景与边框)\n- [八、变形与动画](#八变形与动画)\n- [九、响应式设计](#九响应式设计)\n- [十、CSS3 新特性](#十css3-新特性)\n- [十一、CSS 预处理器](#十一css-预处理器)\n- [十二、实战示例](#十二实战示例)\n- [十三、最佳实践](#十三最佳实践)\n- [十四、快速参考](#十四快速参考)\n\n---\n\n## 一、CSS 简介\n\n### 1.1 什么是 CSS\n\nCSS（Cascading Style Sheets，层叠样式表）用于描述 HTML 文档的样式和布局。\n\n**特点：**\n- 控制网页的外观和布局\n- 实现内容与样式分离\n- 支持响应式设计\n- 丰富的动画效果\n\n### 1.2 CSS 版本历史\n\n| 版本 | 发布年份 | 主要特性 |\n|------|----------|----------|\n| CSS1  | 1996 | 基础样式 |\n| CSS2  | 1998 | 定位、浮动 |\n| CSS2.1 | 2004 | 修复和改进 |\n| CSS3  | 2011 | 模块化、动画、渐变 |\n\n### 1.3 CSS 引入方式\n\n```html\n\u003C!-- 方式1：内联样式 -->\n\u003Cdiv style=\"color: red;\">红色文字\u003C\u002Fdiv>\n\n\u003C!-- 方式2：内部样式表 -->\n\u003Chead>\n    \u003Cstyle>\n        .red-text {\n            color: red;\n        }\n    \u003C\u002Fstyle>\n\u003C\u002Fhead>\n\n\u003C!-- 方式3：外部样式表（推荐） -->\n\u003Chead>\n    \u003Clink rel=\"stylesheet\" href=\"style.css\">\n\u003C\u002Fhead>\n\n\u003C!-- 方式4：导入样式表 -->\n\u003Cstyle>\n    @import url('style.css');\n\u003C\u002Fstyle>\n```\n\n---\n\n## 二、CSS 基础语法\n\n### 2.1 CSS 规则\n\n```css\n\u002F* 选择器 *\u002F\nselector {\n    \u002F* 属性: 值; *\u002F\n    property: value;\n}\n```\n\n### 2.2 注释\n\n```css\n\u002F* 单行注释 *\u002F\n\n\u002F*\n多行注释\n可以写多行\n*\u002F\n```\n\n### 2.3 CSS 单位\n\n**长度单位：**\n```css\n\u002F* 绝对单位 *\u002F\npx; \u002F* 像素 *\u002F\npt; \u002F* 点 *\u002F\ncm; \u002F* 厘米 *\u002F\nmm; \u002F* 毫米 *\u002F\nin; \u002F* 英寸 *\u002F\n\n\u002F* 相对单位 *\u002F\nem; \u002F* 相对于父元素字体大小 *\u002F\nrem; \u002F* 相对于根元素字体大小 *\u002F\n%; \u002F* 百分比 *\u002F\nvw; \u002F* 视口宽度的1% *\u002F\nvh; \u002F* 视口高度的1% *\u002F\nvmin; \u002F* 视口宽度和高度中较小值的1% *\u002F\nvmax; \u002F* 视口宽度和高度中较大值的1% *\u002F\n```\n\n**颜色单位：**\n```css\n\u002F* 颜色名称 *\u002F\ncolor: red;\ncolor: blue;\n\n\u002F* 十六进制 *\u002F\ncolor: #ff0000;\ncolor: #f00;\n\n\u002F* RGB *\u002F\ncolor: rgb(255, 0, 0);\ncolor: rgba(255, 0, 0, 0.5);\n\n\u002F* HSL *\u002F\ncolor: hsl(0, 100%, 50%);\ncolor: hsla(0, 100%, 50%, 0.5);\n\n\u002F* 关键字 *\u002F\ncolor: transparent;\ncolor: currentColor;\n```\n\n### 2.4 CSS 优先级\n\n**优先级（从高到低）：**\n1. `!important`\n2. 内联样式（1000）\n3. ID 选择器（100）\n4. 类选择器、属性选择器、伪类（10）\n5. 标签选择器、伪元素（1）\n6. 通配符选择器（0）\n\n```css\n\u002F* !important 优先级最高 *\u002F\np {\n    color: red !important;\n}\n\n\u002F* ID 选择器 *\u002F\n#header {\n    color: blue;\n}\n\n\u002F* 类选择器 *\u002F\n.header {\n    color: green;\n}\n\n\u002F* 标签选择器 *\u002F\np {\n    color: black;\n}\n\n\u002F* 通配符选择器 *\u002F\n* {\n    margin: 0;\n}\n```\n\n---\n\n## 三、选择器\n\n### 3.1 基础选择器\n\n```css\n\u002F* 通配符选择器 *\u002F\n* {\n    margin: 0;\n    padding: 0;\n}\n\n\u002F* 标签选择器 *\u002F\np {\n    color: red;\n}\n\n\u002F* 类选择器 *\u002F\n.red-text {\n    color: red;\n}\n\n\u002F* ID 选择器 *\u002F\n#header {\n    background: blue;\n}\n\n\u002F* 组合选择器 *\u002F\np.red-text {\n    color: red;\n}\n\n#header .logo {\n    width: 100px;\n}\n```\n\n### 3.2 关系选择器\n\n```css\n\u002F* 后代选择器（所有后代） *\u002F\ndiv p {\n    color: red;\n}\n\n\u002F* 子选择器（直接子元素） *\u002F\ndiv > p {\n    color: blue;\n}\n\n\u002F* 相邻兄弟选择器（下一个兄弟） *\u002F\nh1 + p {\n    color: green;\n}\n\n\u002F* 通用兄弟选择器（后面所有兄弟） *\u002F\nh1 ~ p {\n    color: yellow;\n}\n```\n\n### 3.3 属性选择器\n\n```css\n\u002F* 存在属性 *\u002F\na[href] {\n    color: blue;\n}\n\n\u002F* 属性值等于 *\u002F\na[href=\"https:\u002F\u002Fwww.example.com\"] {\n    color: red;\n}\n\n\u002F* 属性值包含 *\u002F\na[href*=\"example\"] {\n    color: green;\n}\n\n\u002F* 属性值以...开头 *\u002F\na[href^=\"https\"] {\n    color: blue;\n}\n\n\u002F* 属性值以...结尾 *\u002F\na[href$=\".pdf\"] {\n    color: red;\n}\n\n\u002F* 属性值包含单词 *\u002F\na[href~=\"example\"] {\n    color: green;\n}\n\n\u002F* 属性值以...开头或等于 *\u002F\na[href|=\"en\"] {\n    color: blue;\n}\n```\n\n### 3.4 伪类选择器\n\n```css\n\u002F* 链接伪类 *\u002F\na:link { color: blue; }\na:visited { color: purple; }\na:hover { color: red; }\na:active { color: orange; }\n\n\u002F* 目标伪类 *\u002F\n#section1:target {\n    background: yellow;\n}\n\n\u002F* 焦点伪类 *\u002F\ninput:focus {\n    border: 2px solid blue;\n}\n\n\u002F* 结构伪类 *\u002F\nli:first-child { color: red; }\nli:last-child { color: blue; }\nli:nth-child(odd) { background: #f0f0f0; }\nli:nth-child(even) { background: #e0e0e0; }\nli:nth-child(3n) { color: red; }\n\n\u002F* 表单伪类 *\u002F\ninput:checked { border: 2px solid green; }\ninput:disabled { opacity: 0.5; }\ninput:enabled { opacity: 1; }\ninput:required { border: 2px solid red; }\n\n\u002F* 否定伪类 *\u002F\ndiv:not(.header) {\n    color: red;\n}\n```\n\n### 3.5 伪元素选择器\n\n```css\n\u002F* 首字母 *\u002F\np::first-letter {\n    font-size: 2em;\n    color: red;\n}\n\n\u002F* 首行 *\u002F\np::first-line {\n    color: blue;\n}\n\n\u002F* 前后插入内容 *\u002F\np::before {\n    content: \"前缀：\";\n    color: red;\n}\n\np::after {\n    content: \"（后缀）\";\n    color: blue;\n}\n\n\u002F* 选中文本 *\u002F\n::selection {\n    background: yellow;\n    color: black;\n}\n```\n\n---\n\n## 四、文本样式\n\n### 4.1 字体属性\n\n```css\n\u002F* 字体家族 *\u002F\nfont-family: Arial, sans-serif;\nfont-family: \"Microsoft YaHei\", \"微软雅黑\", sans-serif;\n\n\u002F* 字体大小 *\u002F\nfont-size: 16px;\nfont-size: 1em;\nfont-size: 1rem;\n\n\u002F* 字体粗细 *\u002F\nfont-weight: normal;\nfont-weight: bold;\nfont-weight: 400;\nfont-weight: 700;\n\n\u002F* 字体样式 *\u002F\nfont-style: normal;\nfont-style: italic;\nfont-style: oblique;\n\n\u002F* 字体变体 *\u002F\nfont-variant: normal;\nfont-variant: small-caps;\n\n\u002F* 行高 *\u002F\nline-height: 1.5;\nline-height: 24px;\nline-height: 150%;\n\n\u002F* 字体简写 *\u002F\nfont: italic bold 16px\u002F1.5 Arial, sans-serif;\n```\n\n### 4.2 文本属性\n\n```css\n\u002F* 文本颜色 *\u002F\ncolor: red;\ncolor: #ff0000;\ncolor: rgb(255, 0, 0);\n\n\u002F* 文本对齐 *\u002F\ntext-align: left;\ntext-align: center;\ntext-align: right;\ntext-align: justify;\n\n\u002F* 文本装饰 *\u002F\ntext-decoration: none;\ntext-decoration: underline;\ntext-decoration: line-through;\ntext-decoration: overline;\n\n\u002F* 文本转换 *\u002F\ntext-transform: none;\ntext-transform: uppercase;\ntext-transform: lowercase;\ntext-transform: capitalize;\n\n\u002F* 文本缩进 *\u002F\ntexttext-indent: 2em;\ntext-indent: 32px;\n\n\u002F* 文本阴影 *\u002F\ntext-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);\ntext-shadow: 1px 1px 0 #fff, -1px -1px 0 #000;\n\n\u002F* 字间距 *\u002F\nletter-spacing: 2px;\nletter-spacing: 0.5em;\n\n\u002F* 词间距 *\u002F\nword-spacing: 10px;\n\n\u002F* 空白处理 *\u002F\nwhite-space: normal;\nwhite-space: nowrap;\nwhite-space: pre;\nwhite-space: pre-wrap;\n\n\u002F* 文本溢出 *\u002F\ntext-overflow: clip;\ntext-overflow: ellipsis;\n\n\u002F* 方向 *\u002F\ndirection: ltr;\ndirection: rtl;\n\n\u002F* 书写模式 *\u002F\nwriting-mode: horizontal-tb;\nwriting-mode: vertical-rl;\n```\n\n### 4.3 文本换行\n\n```css\n\u002F* 强制换行 *\u002F\nword-wrap: normal;\nword-wrap: break-word;\n\n\u002F* 单词换行 *\u002F\nword-break: normal;\nword-break: break-all;\nword-break: keep-all;\n\n\u002F* 连字符 *\u002F\nhyphens: none;\nhyphens: auto;\n```\n\n---\n\n## 五、盒模型\n\n### 5.1 盒模型组成\n\n```\n┌─────────────────────────────┐\n│         Margin             │ 外边距\n│  ┌─────────────────────┐  │\n│  │      Border         │  │ 边框\n│  │  ┌───────────────┐  │  │\n│  │  │   Padding     │  │  │ 内边距\n│  │  │ ┌───────────┐ │  │  │\n│  │  │ │  Content  │ │  │  │ 内容\n│  │  │ └───────────┘ │  │  │\n│  │  └───────────────┘  │  │\n│  └─────────────────────┘  │\n└─────────────────────────────┘\n```\n\n### 5.2 盒模型属性\n\n```css\n\u002F* 内容宽高 *\u002F\nwidth: 300px;\nheight: 200px;\n\n\u002F* 最小宽高 *\u002F\nmin-width: 200px;\nmin-height: 100px;\n\n\u002F* 最大宽高 *\u002F\nmax-width: 100%;\nmax-height: 500px;\n\n\u002F* 内边距 *\u002F\npadding: 10px;\npadding: 10px 20px;\npadding: 10px 20px 30px;\npadding: 10px 20px 30px 40px;\n\npadding-top: 10px;\npadding-right: 20px;\npadding-bottom: 30px;\npadding-left: 40px;\n\n\u002F* 边框 *\u002F\nborder: 1px solid #000;\nborder: 2px dashed red;\nborder: 3px dotted blue;\n\nborder-width: 1px;\nborder-style: solid;\nborder-color: #000;\n\nborder-top: 1px solid #000;\nborder-right: 2px dashed red;\nborder-bottom: 3px dotted blue;\nborder-left: 4px double green;\n\n\u002F* 圆角 *\u002F\nborder-radius: 5px;\nborder-radius: 10px 20px;\nborder-radius: 10px 20px 30px 40px;\nborder-radius: 50%; \u002F* 圆形 *\u002F\n\nborder-top-left-radius: 10px;\nborder-top-right-radius: 20px;\nborder-bottom-left-radius: 30px;\nborder-bottom-right-radius: 40px;\n\n\u002F* 外边距 *\u002F\nmargin: 10px;\nmargin: 10px 20px;\nmargin: 10px 20px 30px;\nmargin: 10px 20px 30px 40px;\n\nmargin-top: 10px;\nmargin-right: 20px;\nmargin-bottom: 30px;\nmargin-left: 40px;\n\n\u002F* 水平居中 *\u002F\nmargin: 0 auto;\n```\n\n### 5.3 盒模型模式\n\n```css\n\u002F* 标准盒模型（默认） *\u002F\nbox-sizing: content-box;\n\n\u002F* IE 盒模型 *\u002F\nbox-sizing: border-box;\n\n\u002F* 全局设置 *\u002F\n* {\n    box-sizing: border-box;\n}\n```\n\n**区别：**\n- `content-box`：width 只包含内容\n- `border-box`：width 包含内容、padding、border\n\n### 5.4 外边距合并\n\n```css\n\u002F* 垂直方向的外边距会合并 *\u002F\n.box1 {\n    margin-bottom: 20px;\n}\n\n.box2 {\n    margin-top: 30px;\n}\n\n\u002F* 实际外边距为 30px（取较大值） *\u002F\n\n\u002F* 解决方法 *\u002F\n.box2 {\n    margin-top: 30px;\n    display: inline-block;\n}\n\n.box2 {\n    margin-top: 30px;\n    padding-top: 1px;\n}\n```\n\n---\n\n## 六、布局\n\n### 6.1 Display 属性\n\n```css\n\u002F* 块级元素 *\u002F\ndisplay: block;\n\n\u002F* 行内元素 *\u002F\ndisplay: inline;\n\n\u002F* 行内块元素 *\u002F\ndisplay: inline-block;\n\n\u002F* 隐藏元素 *\u002F\ndisplay: none;\n\n\u002F* 弹性布局 *\u002F\ndisplay: flex;\ndisplay: inline-flex;\n\n\u002F* 网格布局 *\u002F\ndisplay: grid;\ndisplay: inline-grid;\n\n\u002F* 表格 *\u002F\ndisplay: table;\ndisplay: table-cell;\ndisplay: table-row;\n```\n\n### 6.2 定位\n\n```css\n\u002F* 静态定位（默认） *\u002F\nposition: static;\n\n\u002F* 相对定位 *\u002F\nposition: relative;\ntop: 10px;\nleft: 20px;\n\n\u002F* 绝对定位 *\u002F\nposition: absolute;\ntop: 0;\nleft: 0;\n\n\u002F* 固定定位 *\u002F\nposition: fixed;\ntop: 0;\nright: 0;\n\n\u002F* 粘性定位 *\u002F\nposition: sticky;\ntop: 10px;\n\n\u002F* 层级 *\u002F\nz-index: 1;\nz-index: 999;\n```\n\n### 6.3 浮动\n\n```css\n\u002F* 左浮动 *\u002F\nfloat: left;\n\n\u002F* 右浮动 *\u002F\nfloat: right;\n\n\u002F* 不浮动 *\u002F\nfloat: none;\n\n\u002F* 清除浮动 *\u002F\n.clearfix::after {\n    content: \"\";\n    display: block;\n    clear: both;\n}\n\n.clearfix {\n    *zoom: 1;\n}\n\n\u002F* 或使用 overflow *\u002F\n.container {\n    overflow: hidden;\n}\n```\n\n### 6.4 Flexbox 布局\n\n```css\n\u002F* 容器属性 *\u002F\n.container {\n    display: flex;\n    \n    \u002F* 主轴方向 *\u002F\n    flex-direction: row;\n    flex-direction: row-reverse;\n    flex-direction: column;\n    flex-direction: column-reverse;\n    \n    \u002F* 换行 *\u002F\n    flex-wrap: nowrap;\n    flex-wrap: wrap;\n    flex-wrap: wrap-reverse;\n    \n    \u002F* 简写 *\u002F\n    flex-flow: row nowrap;\n    \n    \u002F* 主轴对齐 *\u002F\n    justify-content: flex-start;\n    justify-content: flex-end;\n    justify-content: center;\n    justify-content: space-between;\n    justify-content: space-around;\n    justify-content: space-evenly;\n    \n    \u002F* 交叉轴对齐 *\u002F\n    align-items: flex-start;\n    align-items: flex-end;\n    align-items: center;\n    align-items: baseline;\n    align-items: stretch;\n    \n    \u002F* 多行交叉轴对齐 *\u002F\n    align-content: flex-start;\n    align-content: flex-end;\n    align-content: center;\n    align-content: space-between;\n    align-content: space-around;\n    align-content: stretch;\n}\n\n\u002F* 项目属性 *\u002F\n.item {\n    \u002F* 放大比例 *\u002F\n    flex-grow: 0;\n    flex-grow: 1;\n    \n    \u002F* 缩小比例 *\u002F\n    flex-shrink: 1;\n    flex-shrink: 0;\n    \n    \u002F* 初始大小 *\u002F\n    flex-basis: auto;\n    flex-basis: 200px;\n    \n    \u002F* 简写 *\u002F\n    flex: 0 1 auto;\n    flex: 1 1 auto;\n    flex: none;\n    \n    \u002F* 单独对齐 *\u002F\n    align-self: flex-start;\n    align-self: flex-end;\n    align-self: center;\n    align-self: baseline;\n    align-self: stretch;\n    \n    \u002F* 顺序 *\u002F\n    order: 0;\n    order: 1;\n}\n```\n\n### 6.5 Grid 布局\n\n```css\n\u002F* 容器属性 *\u002F\n.container {\n    display: grid;\n    \n    \u002F* 行列定义 *\u002F\n    grid-template-columns: 100px 200px 300px;\n    grid-template-columns: repeat(3, 100px);\n    grid-template-columns: 1fr 2fr 1fr;\n    grid-template-columns: auto 1fr auto;\n    \n    grid-template-rows: 100px 200px;\n    grid-template-rows: repeat(2, 100px);\n    grid-template-rows: 1fr 2fr;\n    \n    \u002F* 简写 *\u002F\n    grid-template: 100px 200px \u002F 1fr 2fr;\n    \n    \u002F* 间距 *\u002F\n    grid-column-gap: 10px;\n    grid-row-gap: 20px;\n    grid-gap: 10px 20px;\n    \n    \u002F* 区域 *\u002F\n    grid-template-areas:\n        \"header header header\"\n        \"sidebar content content\"\n        \"footer footer footer\";\n    \n    \u002F* 对齐 *\u002F\n    justify-items: start;\n    justify-items: end;\n    justify-items: center;\n    justify-items: stretch;\n    \n    align-items: start;\n    align-items: end;\n    align-items: center;\n    align-items: stretch;\n    \n    justify-content: start;\n    justify-content: end;\n    justify-content: center;\n    justify-content: stretch;\n    justify-content: space-between;\n    justify-content: space-around;\n    justify-content: space-evenly;\n    \n    align-content: start;\n    align-content: end;\n    align-content: center;\n    align-content: stretch;\n    align-content: space-between;\n    align-content: space-around;\n    align-content: space-evenly;\n}\n\n\u002F* 项目属性 *\u002F\n.item {\n    \u002F* 列位置 *\u002F\n    grid-column: 1;\n    grid-column: 1 \u002F 3;\n    grid-column: 1 \u002F span 2;\n    \n    \u002F* 行位置 *\u002F\n    grid-row: 1;\n    grid-row: 1 \u002F 3;\n    grid-row: 1 \u002F span 2;\n    \n    \u002F* 简写 *\u002F\n    grid-area: 1 \u002F 1 \u002F 2 \u002F 3;\n    \n    \u002F* 区域名称 *\u002F\n    grid-area: header;\n    \n    \u002F* 对齐 *\u002F\n    justify-self: start;\n    justify-self: end;\n    justify-self: center;\n    justify-self: stretch;\n    \n    align-self: start;\n    align-self: end;\n    align-self: center;\n    align-self: stretch;\n}\n```\n\n---\n\n## 七、背景与边框\n\n### 7.1 背景属性\n\n```css\n\u002F* 背景颜色 *\u002F\nbackground-color: red;\nbackground-color: #ff0000;\nbackground-color: rgba(255, 0, 0, 0.5);\n\n\u002F* 背景图片 *\u002F\nbackground-image: url('image.jpg');\nbackground-image: linear-gradient(to right, red, blue);\nbackground-image: radial-gradient(circle, red, blue);\n\n\u002F* 背景重复 *\u002F\nbackground-repeat: repeat;\nbackground-repeat: repeat-x;\nbackground-repeat: repeat-y;\nbackground-repeat: no-repeat;\n\n\u002F* 背景位置 *\u002F\nbackground-position: center;\nbackground-position: top;\nbackground-position: bottom;\nbackground-position: left;\nbackground-position: right;\nbackground-position: 10px 20px;\nbackground-position: 50% 50%;\n\n\u002F* 背景大小 *\u002F\nbackground-size: cover;\nbackground-size: contain;\nbackground-size: 100% 100%;\nbackground-size: 50% auto;\n\n\u002F* 背景固定 *\u002F\nbackground-attachment: scroll;\nbackground-attachment: fixed;\nbackground-attachment: local;\n\n\u002F* 背景简写 *\u002F\nbackground: red;\nbackground: url('image.jpg') no-repeat center;\nbackground: url('image.jpg') no-repeat center \u002F cover fixed;\n\n\u002F* 多重背景 *\u002F\nbackground: \n    url('image1.jpg') no-repeat top left,\n    url('image2.jpg') no-repeat bottom right;\n```\n\n### 7.2 渐变\n\n```css\n\u002F* 线性渐变 *\u002F\nbackground: linear-gradient(to right, red, blue);\nbackground: linear-gradient(to bottom, red, orange, yellow, green, blue, indigo, violet);\nbackground: linear-gradient(45deg, red, blue);\nbackground: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));\n\n\u002F* 径向渐变 *\u002F\nbackground: radial-gradient(circle, red, blue);\nbackground: radial-gradient(ellipse, red, blue);\nbackground: radial-gradient(circle at center, red, blue);\nbackground: radial-gradient(circle at 30% 70%, red, blue);\n\n\u002F* 重复渐变 *\u002F\nbackground: repeating-linear-gradient(to right, red, red 10px, blue 10px, blue 20px);\nbackground: repeating-radial-gradient(circle, red, red 10px, blue 10px, blue 20px);\n```\n\n### 7.3 边框属性\n\n```css\n\u002F* 边框简写 *\u002F\nborder: 1px solid #000;\nborder: 2px dashed red;\nborder: 3px dotted blue;\n\n\u002F* 边框宽度 *\u002F\nborder-width: 1px;\nborder-width: 1px 2px;\nborder-width: 1px 2px 3px;\nborder-width: 1px 2px 3px 4px;\n\n\u002F* 边框样式 *\u002F\nborder-style: solid;\nborder-style: dashed;\nborder-style: dotted;\nborder-style: double;\nborder-style: groove;\nborder-style: ridge;\nborder-style: inset;\nborder-style: outset;\nborder-style: none;\n\n\u002F* 边框颜色 *\u002F\nborder-color: #000;\nborder-color: red;\nborder-color: rgba(255, 0, 0, 0.5);\n\n\u002F* 单独边框 *\u002F\nborder-top: 1px solid #000;\nborder-right: 2px dashed red;\nborder-bottom: 3px dotted blue;\nborder-left: 4px double green;\n\n\u002F* 边框圆角 *\u002F\nborder-radius: 5px;\nborder-radius: 10px 20px;\nborder-radius: 10px 20px 30px 40px;\nborder-radius: 50%;\n\n\u002F* 图片边框 *\u002F\nborder-image: url('border.png') 30 stretch;\nborder-image: url('border.png') 30 round;\nborder-image: url('border.png') 30 repeat;\n```\n\n### 7.4 阴影\n\n```css\n\u002F* 盒阴影 *\u002F\nbox-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);\nbox-shadow: 0 0 10px rgba(0, 0, 0, 0.5);\nbox-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.5);\nbox-shadow: \n    2px 2px 4px rgba(0, 0, 0, 0.5),\n    -2px -2px 4px rgba(255, 255, 255, 0.5);\n\n\u002F* 文本阴影 *\u002F\ntext-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);\ntext-shadow: 1px 1px 0 #fff, -1px -1px 0 #000;\n```\n\n---\n\n## 八、变形与动画\n\n### 8.1 变形\n\n```css\n\u002F* 平移 *\u002F\ntransform: translateX(100px);\ntransform: translateY(100px);\ntransform: translate(100px, 100px);\n\n\u002F* 缩放 *\u002F\ntransform: scaleX(1.5);\ntransform: scaleY(1.5);\ntransform: scale(1.5);\ntransform: scale(1.5, 0.8);\n\n\u002F* 旋转 *\u002F\ntransform: rotate(45deg);\ntransform: rotateX(45deg);\ntransform: rotateY(45deg);\n\n\u002F* 倾斜 *\u002F\ntransform: skewX(45deg);\ntransform: skewY(45deg);\ntransform: skew(45deg, 45deg);\n\n\u002F* 组合变形 *\u002F\ntransform: translate(100px, 100px) rotate(45deg) scale(1.5);\n\n\u002F* 变形原点 *\u002F\ntransform-origin: center;\ntransform-origin: top left;\ntransform-origin: 50% 50%;\n```\n\n### 8.2 过渡\n\n```css\n\u002F* 过渡属性 *\u002F\ntransition-property: all;\ntransition-property: width, height;\ntransition-property: background-color;\n\n\u002F* 过渡时间 *\u002F\ntransition-duration: 0.3s;\ntransition-duration: 300ms;\n\n\u002F* 过渡函数 *\u002F\ntransition-timing-function: linear;\ntransition-timing-function: ease;\ntransition-timing-function: ease-in;\ntransition-timing-function: ease-out;\ntransition-timing-function: ease-in-out;\ntransition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);\n\n\u002F* 过渡延迟 *\u002F\ntransition-delay: 0.1s;\n\n\u002F* 过渡简写 *\u002F\ntransition: all 0.3s ease;\ntransition: width 0.3s ease, height 0.3s ease-in;\ntransition: all 0.3s ease 0.1s;\n\n\u002F* 示例 *\u002F\n.button {\n    background: blue;\n    transition: background 0.3s ease;\n}\n\n.button:hover {\n    background: red;\n}\n```\n\n### 8.3 动画\n\n```css\n\u002F* 定义动画 *\u002F\n@keyframes slideIn {\n    from {\n        transform: translateX(-100%);\n        opacity: 0;\n    }\n    to {\n        transform: translateX(0);\n        opacity: 1;\n    }\n}\n\n@keyframes bounce {\n    0%, 100% {\n        transform: translateY(0);\n    }\n    50% {\n        transform: translateY(-20px);\n    }\n}\n\n@keyframes rotate {\n    from {\n        transform: rotate(0deg);\n    }\n    to {\n        transform: rotate(360deg);\n    }\n}\n\n\u002F* 动画属性 *\u002F\n.animation {\n    \u002F* 动画名称 *\u002F\n    animation-name: slideIn;\n    \n    \u002F* 动画时间 *\u002F\n    animation-duration: 1s;\n    \n    \u002F* 动画函数 *\u002F\n    animation-timing-function: ease;\n    \n    \u002F* 动画延迟 *\u002F\n    animation-delay: 0.5s;\n    \n    \u002F* 动画次数 *\u002F\n    animation-iteration-count: 1;\n    animation-iteration-count: infinite;\n    \n    \u002F* 动画方向 *\u002F\n    animation-direction: normal;\n    animation-direction: reverse;\n    animation-direction: alternate;\n    animation-direction: alternate-reverse;\n    \n    \u002F* 动画填充模式 *\u002F\n    animation-fill-mode: none;\n    animation-fill-mode: forwards;\n    animation-fill-mode: backwards;\n    animation-fill-mode: both;\n    \n    \u002F* 动画状态 *\u002F\n    animation-play-state: running;\n    animation-play-state: paused;\n    \n    \u002F* 动画简写 *\u002F\n    animation: slideIn 1s ease 0.5s 1 forwards;\n}\n\n\u002F* 暂停动画 *\u002F\n.animation:hover {\n    animation-play-state: paused;\n}\n```\n\n---\n\n## 九、响应式设计\n\n### 9.1 媒体查询\n\n```css\n\u002F* 基本语法 *\u002F\n@media screen and (min-width: 768px) {\n    .container {\n        width: 750px;\n    }\n}\n\n\u002F* 常用断点 *\u002F\n@media (max-width: 576px) {\n    \u002F* 手机 *\u002F\n}\n\n@media (min-width: 576px) and (max-width: 768px) {\n    \u002F* 平板 *\u002F\n}\n\n@media (min-width: 768px) and (max-width: 992px) {\n    \u002F* 小屏桌面 *\u002F\n}\n\n@media (min-width: 992px) and (max-width: 1200px) {\n    \u002F* 中屏桌面 *\u002F\n}\n\n@media (min-width: 1200px) {\n    \u002F* 大屏桌面 *\u002F\n}\n\n\u002F* 媒体类型 *\u002F\n@media screen {\n    \u002F* 屏幕 *\u002F\n}\n\n@media print {\n    \u002F* 打印 *\u002F\n}\n\n@media (min-resolution: 2dppx) {\n    \u002F* 高清屏 *\u002F\n}\n\n\u002F* 逻辑运算符 *\u002F\n@media screen and (min-width: 768px) {\n    \u002F* 与 *\u002F\n}\n\n@media screen, print {\n    \u002F* 或 *\u002F\n}\n\n@media not screen {\n    \u002F* 非 *\u002F\n}\n```\n\n### 9.2 视口单位\n\n```css\n\u002F* 视口宽度 *\u002F\nwidth: 100vw;\nwidth: 50vw;\n\n\u002F* 视口高度 *\u002F\nheight: 100vh;\nheight: 50vh;\n\n\u002F* 视口较小值 *\u002F\nfont-size: 1vmin;\n\n\u002F* 视口较大值 *\u002F\nfont-size: 1vmax;\n```\n\n### 9.3 响应式图片\n\n```css\n\u002F* 响应式背景 *\u002F\n.responsive-bg {\n    background-image: url('small.jpg');\n}\n\n@media (min-width: 768px) {\n    .responsive-bg {\n        background-image: url('medium.jpg');\n    }\n}\n\n@media (min-width: 1200px) {\n    .responsive-bg {\n        background-image: url('large.jpg');\n    }\n}\n\n\u002F* 使用 image-set *\u002F\n.responsive-bg {\n    background-image: -webkit-image-set(\n        url('small.jpg') 1x,\n        url('large.jpg') 2x\n    );\n}\n```\n\n---\n\n## 十、CSS3 新特性\n\n### 10.1 圆角与阴影\n\n```css\n\u002F* 圆角 *\u002F\nborder-radius: 5px;\nborder-radius: 50%;\n\n\u002F* 盒阴影 *\u002F\nbox-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);\n\n\u002F* 文本阴影 *\u002F\ntext-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);\n```\n\n### 10.2 渐变\n\n```css\n\u002F* 线性渐变 *\u002F\nbackground: linear-gradient(to right, red, blue);\n\n\u002F* 径向渐变 *\u002F\nbackground: radial-gradient(circle, red, blue);\n```\n\n### 10.3 变换\n\n```css\n\u002F* 2D 变换 *\u002F\ntransform: translate(100px, 100px);\ntransform: rotate(45deg);\ntransform: scale(1.5);\ntransform: skew(45deg, 45deg);\n\n\u002F* 3D 变换 *\u002F\ntransform: translateX(100px);\ntransform: translateY(100px);\ntransform: translateZ(100px);\ntransform: translate3d(100px, 100px, 100px);\n\ntransform: rotateX(45deg);\ntransform: rotateY(45deg);\ntransform: rotateZ(45deg);\ntransform: rotate3d(1, 1, 1, 45deg);\n\ntransform: scaleX(1.5);\ntransform: scaleY(1.5);\ntransform: scaleZ(1.5);\ntransform: scale3d(1.5, 1.5, 1.5);\n\n\u002F* 透视 *\u002F\nperspective: 1000px;\n\n\u002F* 变换样式 *\u002F\ntransform-style: flat;\ntransform-style: preserve-3d;\n\n\u002F* 背面可见性 *\u002F\nbackface-visibility: visible;\nbackface-visibility: hidden;\n```\n\n### 10.4 过渡与动画\n\n```css\n\u002F* 过渡 *\u002F\ntransition: all 0.3s ease;\n\n\u002F* 动画 *\u002F\n@keyframes animationName {\n    from { }\n    to { }\n}\n\nanimation: animationName 1s ease infinite;\n```\n\n### 10.5 滤镜\n\n```css\n\u002F* 模糊 *\u002F\nfilter: blur(5px);\n\n\u002F* 亮度 *\u002F\nfilter: brightness(1.5);\n\n\u002F* 对比度 *\u002F\nfilter: contrast(1.5);\n\n\u002F* 饱和度 *\u002F\nfilter: saturate(1.5);\n\n\u002F* 灰度 *\u002F\nfilter: grayscale(1);\n\n\u002F* 反色 *\u002F\nfilter: invert(1);\n\n\u002F* 褐色 *\u002F\nfilter: sepia(1);\n\n\u002F* 色相旋转 *\u002F\nfilter: hue-rotate(90deg);\n\n\u002F* 透明度 *\u002F\nfilter: opacity(0.5);\n\n\u002F* 阴影 *\u002F\nfilter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));\n\n\u002F* 组合滤镜 *\u002F\nfilter: blur(5px) brightness(1.5) contrast(1.2);\n```\n\n### 10.6 混合模式\n\n```css\n\u002F* 混合模式 *\u002F\nmix-blend-mode: normal;\nmix-blend-mode: multiply;\nmix-blend-mode: screen;\nmix-blend-mode: overlay;\nmix-blend-mode: darken;\nmix-blend-mode: lighten;\nmix-blend-mode: color-dodge;\nmix-blend-mode: color-burn;\nmix-blend-mode: hard-light;\nmix-blend-mode: soft-light;\nmix-blend-mode: difference;\nmix-blend-mode: exclusion;\nmix-blend-mode: hue;\nmix-blend-mode: saturation;\nmix-blend-mode: color;\nmix-blend-mode: luminosity;\n```\n\n---\n\n## 十一、CSS 预处理器\n\n### 11.1 Sass\u002FSCSS\n\n```scss\n\u002F* 变量 *\u002F\n$primary-color: #007bff;\n$font-size: 16px;\n\n\u002F* 使用变量 *\u002F\n.button {\n    background: $primary-color;\n    font-size: $font-size;\n}\n\n\u002F* 嵌套 *\u002F\n.container {\n    .header {\n        h1 {\n            color: $primary-color;\n        }\n    }\n}\n\n\u002F* 混合器 *\u002F\n@mixin flex-center {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n\n.container {\n    @include flex-center;\n}\n\n\u002F* 函数 *\u002F\n@function px-to-rem($px) {\n    @return $px \u002F 16px * 1rem;\n}\n\n.container {\n    width: px-to-rem(320px);\n}\n\n\u002F* 继承 *\u002F\n.button {\n    padding: 10px 20px;\n    border: none;\n    border-radius: 5px;\n}\n\n.primary-button {\n    @extend .button;\n    background: $primary-color;\n    color: white;\n}\n\n\u002F* 导入 *\u002F\n@import 'variables';\n@import 'mixins';\n@import 'base';\n```\n\n### 11.2 Less\n\n```less\n\u002F* 变量 *\u002F\n@primary-color: #007bff;\n@font-size: 16px;\n\n\u002F* 使用变量 *\u002F\n.button {\n    background: @primary-color;\n    font-size: @font-size;\n}\n\n\u002F* 嵌套 *\u002F\n.container {\n    .header {\n        h1 {\n            color: @primary-color;\n        }\n    }\n}\n\n\u002F* 混合器 *\u002F\n.flex-center() {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n\n.container {\n    .flex-center();\n}\n\n\u002F* 运算 *\u002F\n@width: 100px;\n@height: @width * 2;\n\n.container {\n    width: @width;\n    height: @height;\n}\n\n\u002F* 导入 *\u002F\n@import 'variables';\n@import 'mixins';\n```\n\n---\n\n## 十二、实战示例\n\n### 12.1 卡片组件\n\n```css\n.card {\n    width: 300px;\n    background: white;\n    border-radius: 10px;\n    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n    overflow: hidden;\n    transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.card:hover {\n    transform: translateY(-5px);\n    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);\n}\n\n.card-image {\n    width: 100%;\n    height: 200px;\n    object-fit: cover;\n}\n\n.card-content {\n    padding: 20px;\n}\n\n.card-title {\n    font-size: 18px;\n    font-weight: bold;\n    margin-bottom: 10px;\n    color: #333;\n}\n\n.card-description {\n    font-size: 14px;\n    color: #666;\n    line-height: 1.6;\n}\n\n.card-footer {\n    padding: 15px 20px;\n    border-top: 1px solid #eee;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n}\n\n.card-button {\n    padding: 8px 16px;\n    background: #007bff;\n    color: white;\n    border: none;\n    border-radius: 5px;\n    cursor: pointer;\n    transition: background 0.3s ease;\n}\n\n.card-button:hover {\n    background: #0056b3;\n}\n```\n\n### 12.2 导航栏\n\n```css\n.navbar {\n    background: #333;\n    padding: 0 20px;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    height: 60px;\n}\n\n.navbar-brand {\n    font-size: 20px;\n    font-weight: bold;\n    color: white;\n    text-decoration: none;\n}\n\n.navbar-menu {\n    display: flex;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n}\n\n.navbar-item {\n    margin-left: 20px;\n}\n\n.navbar-link {\n    color: white;\n    text-decoration: none;\n    padding: 10px 15px;\n    border-radius: 5px;\n    transition: background 0.3s ease;\n}\n\n.navbar-link:hover {\n    background: #555;\n}\n\n.navbar-link.active {\n    background: #007bff;\n}\n\n\u002F* 响应式导航栏 *\u002F\n@media (max-width: 768px) {\n    .navbar {\n        flex-direction: column;\n        height: auto;\n        padding: 10px 20px;\n    }\n    \n    .navbar-menu {\n        flex-direction: column;\n        width: 100%;\n        margin-top: 10px;\n    }\n    \n    .navbar-item {\n        margin-left: 0;\n        margin-bottom: 5px;\n    }\n    \n    .navbar-link {\n        display: block;\n        text-align: center;\n    }\n}\n```\n\n### 12.3 按钮组件\n\n```css\n.button {\n    padding: 10px 20px;\n    border: none;\n    border-radius: 5px;\n    cursor: pointer;\n    font-size: 14px;\n    font-weight: 500;\n    transition: all 0.3s ease;\n    outline: none;\n}\n\n.button-primary {\n    background: #007bff;\n    color: white;\n}\n\n.button-primary:hover {\n    background: #0056b3;\n    transform: translateY(-2px);\n    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n}\n\n.button-secondary {\n    background: #6c757d;\n    color: white;\n}\n\n.button-secondary:hover {\n    background: #545b62;\n}\n\n.button-success {\n    background: #28a745;\n    color: white;\n}\n\n.button-success:hover {\n    background: #1e7e34;\n}\n\n.button-danger {\n    background: #dc3545;\n    color: white;\n}\n\n.button-danger:hover {\n    background: #bd2130;\n}\n\n.button-outline {\n    background: transparent;\n    border: 2px solid #007bff;\n    color: #007bff;\n}\n\n.button-outline:hover {\n    background: #007bff;\n    color: white;\n}\n\n.button-large {\n    padding: 15px 30px;\n    font-size: 16px;\n}\n\n.button-small {\n    padding: 5px 10px;\n    font-size: 12px;\n}\n\n.button-block {\n    display: block;\n    width: 100%;\n}\n\n.button:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n.button:disabled:hover {\n    transform: none;\n    box-shadow: none;\n}\n```\n\n---\n\n## 十三、最佳实践\n\n### 13.1 命名规范\n\n```css\n\u002F* BEM 命名法 *\u002F\n.block { }\n.block__element { }\n.block--modifier { }\n\n\u002F* 示例 *\u002F\n.card { }\n.card__title { }\n.card__image { }\n.card--featured { }\n\n\u002F* OOCSS *\u002F\n.button { }\n.button-primary { }\n.button-large { }\n\n\u002F* SMACSS *\u002F\n.l-header { }\n.l-footer { }\n.module { }\n.is-active { }\n```\n\n### 13.2 组织结构\n\n```css\n\u002F* base.css - 基础样式 *\u002F\n* {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n}\n\nbody {\n    font-family: Arial, sans-serif;\n    line-height: 1.6;\n}\n\n\u002F* layout.css - 布局样式 *\u002F\n.container {\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 0 20px;\n}\n\n\u002F* components.css - 组件样式 *\u002F\n.button {\n    padding: 10px 20px;\n    border: none;\n    border-radius: 5px;\n    cursor: pointer;\n}\n\n\u002F* utilities.css - 工具类 *\u002F\n.text-center { text-align: center; }\n.mt-10 { margin-top: 10px; }\n.p-20 { padding: 20px; }\n```\n\n### 13.3 性能优化\n\n```css\n\u002F* 使用简写属性 *\u002F\nmargin: 10px 20px;\npadding: 10px 20px;\nborder: 1px solid #000;\nfont: 14px\u002F1.5 Arial, sans-serif;\n\n\u002F* 避免过度使用通配符 *\u002F\n\u002F* * { margin: 0; padding: 0; } *\u002F\n\n\u002F* 避免深层嵌套 *\u002F\n\u002F* .container .header .nav .menu .item { } *\u002F\n\n\u002F* 使用类选择器代替标签选择器 *\u002F\n\u002F* .header h1 { } *\u002F\n\u002F* .header-title { } *\u002F\n\n\u002F* 避免使用 @import *\u002F\n\u002F* @import 'style.css'; *\u002F\n\u002F* 使用 \u003Clink> 代替 *\u002F\n\n\u002F* 使用 will-change 优化动画 *\u002F\n.animated-element {\n    will-change: transform;\n}\n\n.animated-element:hover {\n    transform: scale(1.1);\n}\n```\n\n---\n\n## 十四、快速参考\n\n### 14.1 常用属性速查\n\n```css\n\u002F* 盒模型 *\u002F\nwidth: 100px;\nheight: 100px;\npadding: 10px;\nmargin: 10px;\nborder: 1px solid #000;\n\n\u002F* 文本 *\u002F\ncolor: red;\nfont-size: 16px;\nfont-weight: bold;\ntext-align: center;\nline-height: 1.5;\n\n\u002F* 背景 *\u002F\nbackground: #fff;\nbackground-image: url('image.jpg');\nbackground-size: cover;\n\n\u002F* 定位 *\u002F\nposition: relative;\ntop: 10px;\nleft: 10px;\nz-index: 1;\n\n\u002F* 布局 *\u002F\ndisplay: flex;\njustify-content: center;\nalign-items: center;\n\n\u002F* 动画 *\u002F\ntransition: all 0.3s ease;\ntransform: translate(10px, 10px);\n);\n\n\u002F* 响应式 *\u002F\n@media (max-width: 768px) {\n    .container {\n        width: 100%;\n    }\n}\n```\n\n### 14.2 Flexbox 速查\n\n```css\n.container {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    align-items: stretch;\n}\n\n.item {\n    flex-grow: 0;\n    flex-shrink: 1;\n    flex-basis: auto;\n}\n```\n\n### 14.3 Grid 速查\n\n```css\n.container {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    grid-template-rows: auto;\n    grid-gap: 10px;\n}\n\n.item {\n    grid-column: 1 \u002F 3;\n    grid-row: 1 \u002F 2;\n}\n```\n\n---\n\n**祝学习愉快！掌握 CSS，设计更美的网页！** 🚀\n",null,"1",26,0,1,"2026-04-07T15:58:56.012Z","2026-04-07T15:58:56.014Z","2026-06-07T04:05:38.535Z","0",{"id":27,"categoryName":36,"slug":37,"description":38,"sort":29,"isEnable":30,"createTime":39,"updateTime":40,"deleteTime":29},"前端开发","frontend-engineering","2222","2026-04-03T02:36:11.945Z","2026-04-07T16:38:46.496Z",[],[],[]]