[{"data":1,"prerenderedAt":2083},["ShallowReactive",2],{"doc-page:\u002Fdocs\u002Fcss-tricks":3},{"doc":4,"prev":2043,"next":2050,"resolvedType":8,"readingMinutes":88,"audience":2057,"checklist":2061,"related":2065},{"path":5,"title":6,"description":7,"docType":8,"resourceKind":9,"categoryId":10,"categoryLabel":11,"updatedAt":12,"publishedAt":12,"icon":13,"body":14},"\u002Fdocs\u002Fcss-tricks","CSS 实用技巧","现代 CSS 特性、布局技巧、动画、暗色模式与常用代码片段","article",null,"programming-languages","编程语言","2026-02-28","i-carbon-application",{"type":15,"value":16,"toc":2013},"minimark",[17,21,25,29,45,48,53,164,168,284,287,384,387,390,513,516,690,693,802,805,884,887,935,938,1087,1090,1093,1199,1202,1331,1334,1502,1505,1805,1808,1903,1906,1909,1912,1923,1926,1929,1940,1944,1947,1950,1971,1974,2009],[18,19,6],"h1",{"id":20},"css-实用技巧",[22,23,24],"p",{},"这页适合作为“日常样式问题的实用片段集合”。真正高频的 CSS 问题通常不是语法不会写，而是布局、层级、溢出、暗色模式和动画细节没形成稳定套路。",[26,27,28],"h2",{"id":28},"先建立样式习惯",[30,31,32,36,39,42],"ul",{},[33,34,35],"li",{},"优先写可复用布局模式",[33,37,38],{},"优先移动优先",[33,40,41],{},"优先使用相对单位和弹性布局",[33,43,44],{},"动画和视觉效果先保证可读性，再追求炫技",[26,46,47],{"id":47},"现代布局",[49,50,52],"h3",{"id":51},"container-queries","Container Queries",[54,55,60],"pre",{"className":56,"code":57,"language":58,"meta":59,"style":59},"language-css shiki shiki-themes github-light github-dark",".card-container {\n  container-type: inline-size;\n}\n\n@container (min-width: 400px) {\n  .card {\n    display: grid;\n    grid-template-columns: 1fr 2fr;\n  }\n}\n","css","",[61,62,63,76,86,92,99,109,117,132,153,159],"code",{"__ignoreMap":59},[64,65,68,72],"span",{"class":66,"line":67},"line",1,[64,69,71],{"class":70},"sScJk",".card-container",[64,73,75],{"class":74},"sVt8B"," {\n",[64,77,79,83],{"class":66,"line":78},2,[64,80,82],{"class":81},"sj4cs","  container-type",[64,84,85],{"class":74},": inline-size;\n",[64,87,89],{"class":66,"line":88},3,[64,90,91],{"class":74},"}\n",[64,93,95],{"class":66,"line":94},4,[64,96,98],{"emptyLinePlaceholder":97},true,"\n",[64,100,102,106],{"class":66,"line":101},5,[64,103,105],{"class":104},"szBVR","@container",[64,107,108],{"class":74}," (min-width: 400px) {\n",[64,110,112,115],{"class":66,"line":111},6,[64,113,114],{"class":70},"  .card",[64,116,75],{"class":74},[64,118,120,123,126,129],{"class":66,"line":119},7,[64,121,122],{"class":81},"    display",[64,124,125],{"class":74},": ",[64,127,128],{"class":81},"grid",[64,130,131],{"class":74},";\n",[64,133,135,138,140,143,146,149,151],{"class":66,"line":134},8,[64,136,137],{"class":81},"    grid-template-columns",[64,139,125],{"class":74},[64,141,142],{"class":81},"1",[64,144,145],{"class":104},"fr",[64,147,148],{"class":81}," 2",[64,150,145],{"class":104},[64,152,131],{"class":74},[64,154,156],{"class":66,"line":155},9,[64,157,158],{"class":74},"  }\n",[64,160,162],{"class":66,"line":161},10,[64,163,91],{"class":74},[49,165,167],{"id":166},"subgrid","Subgrid",[54,169,171],{"className":56,"code":170,"language":58,"meta":59,"style":59},".grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 1rem;\n}\n\n.grid-item {\n  display: grid;\n  grid-template-rows: subgrid;\n  grid-row: span 3;\n}\n",[61,172,173,180,191,217,231,235,239,246,256,267,279],{"__ignoreMap":59},[64,174,175,178],{"class":66,"line":67},[64,176,177],{"class":70},".grid",[64,179,75],{"class":74},[64,181,182,185,187,189],{"class":66,"line":78},[64,183,184],{"class":81},"  display",[64,186,125],{"class":74},[64,188,128],{"class":81},[64,190,131],{"class":74},[64,192,193,196,198,201,204,207,210,212,214],{"class":66,"line":88},[64,194,195],{"class":81},"  grid-template-columns",[64,197,125],{"class":74},[64,199,200],{"class":81},"repeat",[64,202,203],{"class":74},"(",[64,205,206],{"class":81},"3",[64,208,209],{"class":74},", ",[64,211,142],{"class":81},[64,213,145],{"class":104},[64,215,216],{"class":74},");\n",[64,218,219,222,224,226,229],{"class":66,"line":94},[64,220,221],{"class":81},"  gap",[64,223,125],{"class":74},[64,225,142],{"class":81},[64,227,228],{"class":104},"rem",[64,230,131],{"class":74},[64,232,233],{"class":66,"line":101},[64,234,91],{"class":74},[64,236,237],{"class":66,"line":111},[64,238,98],{"emptyLinePlaceholder":97},[64,240,241,244],{"class":66,"line":119},[64,242,243],{"class":70},".grid-item",[64,245,75],{"class":74},[64,247,248,250,252,254],{"class":66,"line":134},[64,249,184],{"class":81},[64,251,125],{"class":74},[64,253,128],{"class":81},[64,255,131],{"class":74},[64,257,258,261,263,265],{"class":66,"line":155},[64,259,260],{"class":81},"  grid-template-rows",[64,262,125],{"class":74},[64,264,166],{"class":81},[64,266,131],{"class":74},[64,268,269,272,275,277],{"class":66,"line":161},[64,270,271],{"class":81},"  grid-row",[64,273,274],{"class":74},": span ",[64,276,206],{"class":81},[64,278,131],{"class":74},[64,280,282],{"class":66,"line":281},11,[64,283,91],{"class":74},[49,285,286],{"id":286},"居中",[54,288,290],{"className":56,"code":289,"language":58,"meta":59,"style":59},"\u002F* 最简单的居中 *\u002F\n.center {\n  display: grid;\n  place-items: center;\n}\n\n\u002F* Flexbox 居中 *\u002F\n.center {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n",[61,291,292,298,305,315,327,331,335,340,346,357,368,379],{"__ignoreMap":59},[64,293,294],{"class":66,"line":67},[64,295,297],{"class":296},"sJ8bj","\u002F* 最简单的居中 *\u002F\n",[64,299,300,303],{"class":66,"line":78},[64,301,302],{"class":70},".center",[64,304,75],{"class":74},[64,306,307,309,311,313],{"class":66,"line":88},[64,308,184],{"class":81},[64,310,125],{"class":74},[64,312,128],{"class":81},[64,314,131],{"class":74},[64,316,317,320,322,325],{"class":66,"line":94},[64,318,319],{"class":81},"  place-items",[64,321,125],{"class":74},[64,323,324],{"class":81},"center",[64,326,131],{"class":74},[64,328,329],{"class":66,"line":101},[64,330,91],{"class":74},[64,332,333],{"class":66,"line":111},[64,334,98],{"emptyLinePlaceholder":97},[64,336,337],{"class":66,"line":119},[64,338,339],{"class":296},"\u002F* Flexbox 居中 *\u002F\n",[64,341,342,344],{"class":66,"line":134},[64,343,302],{"class":70},[64,345,75],{"class":74},[64,347,348,350,352,355],{"class":66,"line":155},[64,349,184],{"class":81},[64,351,125],{"class":74},[64,353,354],{"class":81},"flex",[64,356,131],{"class":74},[64,358,359,362,364,366],{"class":66,"line":161},[64,360,361],{"class":81},"  align-items",[64,363,125],{"class":74},[64,365,324],{"class":81},[64,367,131],{"class":74},[64,369,370,373,375,377],{"class":66,"line":281},[64,371,372],{"class":81},"  justify-content",[64,374,125],{"class":74},[64,376,324],{"class":81},[64,378,131],{"class":74},[64,380,382],{"class":66,"line":381},12,[64,383,91],{"class":74},[26,385,386],{"id":386},"实用片段",[49,388,389],{"id":389},"文本截断",[54,391,393],{"className":56,"code":392,"language":58,"meta":59,"style":59},"\u002F* 单行 *\u002F\n.truncate {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n\u002F* 多行 *\u002F\n.line-clamp-3 {\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n",[61,394,395,400,407,419,431,443,447,451,456,463,474,485,497,508],{"__ignoreMap":59},[64,396,397],{"class":66,"line":67},[64,398,399],{"class":296},"\u002F* 单行 *\u002F\n",[64,401,402,405],{"class":66,"line":78},[64,403,404],{"class":70},".truncate",[64,406,75],{"class":74},[64,408,409,412,414,417],{"class":66,"line":88},[64,410,411],{"class":81},"  overflow",[64,413,125],{"class":74},[64,415,416],{"class":81},"hidden",[64,418,131],{"class":74},[64,420,421,424,426,429],{"class":66,"line":94},[64,422,423],{"class":81},"  text-overflow",[64,425,125],{"class":74},[64,427,428],{"class":81},"ellipsis",[64,430,131],{"class":74},[64,432,433,436,438,441],{"class":66,"line":101},[64,434,435],{"class":81},"  white-space",[64,437,125],{"class":74},[64,439,440],{"class":81},"nowrap",[64,442,131],{"class":74},[64,444,445],{"class":66,"line":111},[64,446,91],{"class":74},[64,448,449],{"class":66,"line":119},[64,450,98],{"emptyLinePlaceholder":97},[64,452,453],{"class":66,"line":134},[64,454,455],{"class":296},"\u002F* 多行 *\u002F\n",[64,457,458,461],{"class":66,"line":155},[64,459,460],{"class":70},".line-clamp-3",[64,462,75],{"class":74},[64,464,465,467,469,472],{"class":66,"line":161},[64,466,184],{"class":81},[64,468,125],{"class":74},[64,470,471],{"class":81},"-webkit-box",[64,473,131],{"class":74},[64,475,476,479,481,483],{"class":66,"line":281},[64,477,478],{"class":81},"  -webkit-line-clamp",[64,480,125],{"class":74},[64,482,206],{"class":81},[64,484,131],{"class":74},[64,486,487,490,492,495],{"class":66,"line":381},[64,488,489],{"class":81},"  -webkit-box-orient",[64,491,125],{"class":74},[64,493,494],{"class":81},"vertical",[64,496,131],{"class":74},[64,498,500,502,504,506],{"class":66,"line":499},13,[64,501,411],{"class":81},[64,503,125],{"class":74},[64,505,416],{"class":81},[64,507,131],{"class":74},[64,509,511],{"class":66,"line":510},14,[64,512,91],{"class":74},[49,514,515],{"id":515},"自定义滚动条",[54,517,519],{"className":56,"code":518,"language":58,"meta":59,"style":59},"::-webkit-scrollbar {\n  width: 6px;\n}\n::-webkit-scrollbar-track {\n  background: transparent;\n}\n::-webkit-scrollbar-thumb {\n  background: rgba(0, 0, 0, 0.2);\n  border-radius: 3px;\n}\n\n\u002F* Firefox *\u002F\n* {\n  scrollbar-width: thin;\n  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;\n}\n",[61,520,521,528,543,547,554,566,570,577,606,619,623,627,632,640,652,685],{"__ignoreMap":59},[64,522,523,526],{"class":66,"line":67},[64,524,525],{"class":70},"::-webkit-scrollbar",[64,527,75],{"class":74},[64,529,530,533,535,538,541],{"class":66,"line":78},[64,531,532],{"class":81},"  width",[64,534,125],{"class":74},[64,536,537],{"class":81},"6",[64,539,540],{"class":104},"px",[64,542,131],{"class":74},[64,544,545],{"class":66,"line":88},[64,546,91],{"class":74},[64,548,549,552],{"class":66,"line":94},[64,550,551],{"class":70},"::-webkit-scrollbar-track",[64,553,75],{"class":74},[64,555,556,559,561,564],{"class":66,"line":101},[64,557,558],{"class":81},"  background",[64,560,125],{"class":74},[64,562,563],{"class":81},"transparent",[64,565,131],{"class":74},[64,567,568],{"class":66,"line":111},[64,569,91],{"class":74},[64,571,572,575],{"class":66,"line":119},[64,573,574],{"class":70},"::-webkit-scrollbar-thumb",[64,576,75],{"class":74},[64,578,579,581,583,586,588,591,593,595,597,599,601,604],{"class":66,"line":134},[64,580,558],{"class":81},[64,582,125],{"class":74},[64,584,585],{"class":81},"rgba",[64,587,203],{"class":74},[64,589,590],{"class":81},"0",[64,592,209],{"class":74},[64,594,590],{"class":81},[64,596,209],{"class":74},[64,598,590],{"class":81},[64,600,209],{"class":74},[64,602,603],{"class":81},"0.2",[64,605,216],{"class":74},[64,607,608,611,613,615,617],{"class":66,"line":155},[64,609,610],{"class":81},"  border-radius",[64,612,125],{"class":74},[64,614,206],{"class":81},[64,616,540],{"class":104},[64,618,131],{"class":74},[64,620,621],{"class":66,"line":161},[64,622,91],{"class":74},[64,624,625],{"class":66,"line":281},[64,626,98],{"emptyLinePlaceholder":97},[64,628,629],{"class":66,"line":381},[64,630,631],{"class":296},"\u002F* Firefox *\u002F\n",[64,633,634,638],{"class":66,"line":499},[64,635,637],{"class":636},"s9eBZ","*",[64,639,75],{"class":74},[64,641,642,645,647,650],{"class":66,"line":510},[64,643,644],{"class":81},"  scrollbar-width",[64,646,125],{"class":74},[64,648,649],{"class":81},"thin",[64,651,131],{"class":74},[64,653,655,658,660,662,664,666,668,670,672,674,676,678,681,683],{"class":66,"line":654},15,[64,656,657],{"class":81},"  scrollbar-color",[64,659,125],{"class":74},[64,661,585],{"class":81},[64,663,203],{"class":74},[64,665,590],{"class":81},[64,667,209],{"class":74},[64,669,590],{"class":81},[64,671,209],{"class":74},[64,673,590],{"class":81},[64,675,209],{"class":74},[64,677,603],{"class":81},[64,679,680],{"class":74},") ",[64,682,563],{"class":81},[64,684,131],{"class":74},[64,686,688],{"class":66,"line":687},16,[64,689,91],{"class":74},[49,691,692],{"id":692},"毛玻璃效果",[54,694,696],{"className":56,"code":695,"language":58,"meta":59,"style":59},".glass {\n  background: rgba(255, 255, 255, 0.1);\n  backdrop-filter: blur(16px) saturate(1.2);\n  border: 1px solid rgba(255, 255, 255, 0.15);\n}\n",[61,697,698,705,733,762,798],{"__ignoreMap":59},[64,699,700,703],{"class":66,"line":67},[64,701,702],{"class":70},".glass",[64,704,75],{"class":74},[64,706,707,709,711,713,715,718,720,722,724,726,728,731],{"class":66,"line":78},[64,708,558],{"class":81},[64,710,125],{"class":74},[64,712,585],{"class":81},[64,714,203],{"class":74},[64,716,717],{"class":81},"255",[64,719,209],{"class":74},[64,721,717],{"class":81},[64,723,209],{"class":74},[64,725,717],{"class":81},[64,727,209],{"class":74},[64,729,730],{"class":81},"0.1",[64,732,216],{"class":74},[64,734,735,738,740,743,745,748,750,752,755,757,760],{"class":66,"line":88},[64,736,737],{"class":81},"  backdrop-filter",[64,739,125],{"class":74},[64,741,742],{"class":81},"blur",[64,744,203],{"class":74},[64,746,747],{"class":81},"16",[64,749,540],{"class":104},[64,751,680],{"class":74},[64,753,754],{"class":81},"saturate",[64,756,203],{"class":74},[64,758,759],{"class":81},"1.2",[64,761,216],{"class":74},[64,763,764,767,769,771,773,776,779,781,783,785,787,789,791,793,796],{"class":66,"line":94},[64,765,766],{"class":81},"  border",[64,768,125],{"class":74},[64,770,142],{"class":81},[64,772,540],{"class":104},[64,774,775],{"class":81}," solid",[64,777,778],{"class":81}," rgba",[64,780,203],{"class":74},[64,782,717],{"class":81},[64,784,209],{"class":74},[64,786,717],{"class":81},[64,788,209],{"class":74},[64,790,717],{"class":81},[64,792,209],{"class":74},[64,794,795],{"class":81},"0.15",[64,797,216],{"class":74},[64,799,800],{"class":66,"line":101},[64,801,91],{"class":74},[49,803,804],{"id":804},"渐变文字",[54,806,808],{"className":56,"code":807,"language":58,"meta":59,"style":59},".gradient-text {\n  background: linear-gradient(135deg, #667eea, #764ba2);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n}\n",[61,809,810,817,846,858,869,880],{"__ignoreMap":59},[64,811,812,815],{"class":66,"line":67},[64,813,814],{"class":70},".gradient-text",[64,816,75],{"class":74},[64,818,819,821,823,826,828,831,834,836,839,841,844],{"class":66,"line":78},[64,820,558],{"class":81},[64,822,125],{"class":74},[64,824,825],{"class":81},"linear-gradient",[64,827,203],{"class":74},[64,829,830],{"class":81},"135",[64,832,833],{"class":104},"deg",[64,835,209],{"class":74},[64,837,838],{"class":81},"#667eea",[64,840,209],{"class":74},[64,842,843],{"class":81},"#764ba2",[64,845,216],{"class":74},[64,847,848,851,853,856],{"class":66,"line":88},[64,849,850],{"class":81},"  -webkit-background-clip",[64,852,125],{"class":74},[64,854,855],{"class":81},"text",[64,857,131],{"class":74},[64,859,860,863,865,867],{"class":66,"line":94},[64,861,862],{"class":81},"  -webkit-text-fill-color",[64,864,125],{"class":74},[64,866,563],{"class":81},[64,868,131],{"class":74},[64,870,871,874,876,878],{"class":66,"line":101},[64,872,873],{"class":81},"  background-clip",[64,875,125],{"class":74},[64,877,855],{"class":81},[64,879,131],{"class":74},[64,881,882],{"class":66,"line":111},[64,883,91],{"class":74},[49,885,886],{"id":886},"响应式字体",[54,888,890],{"className":56,"code":889,"language":58,"meta":59,"style":59},"h1 {\n  font-size: clamp(1.5rem, 4vw, 3rem);\n}\n",[61,891,892,898,931],{"__ignoreMap":59},[64,893,894,896],{"class":66,"line":67},[64,895,18],{"class":636},[64,897,75],{"class":74},[64,899,900,903,905,908,910,913,915,917,920,923,925,927,929],{"class":66,"line":78},[64,901,902],{"class":81},"  font-size",[64,904,125],{"class":74},[64,906,907],{"class":81},"clamp",[64,909,203],{"class":74},[64,911,912],{"class":81},"1.5",[64,914,228],{"class":104},[64,916,209],{"class":74},[64,918,919],{"class":81},"4",[64,921,922],{"class":104},"vw",[64,924,209],{"class":74},[64,926,206],{"class":81},[64,928,228],{"class":104},[64,930,216],{"class":74},[64,932,933],{"class":66,"line":88},[64,934,91],{"class":74},[26,936,937],{"id":937},"暗色模式",[54,939,941],{"className":56,"code":940,"language":58,"meta":59,"style":59},":root {\n  --bg: #ffffff;\n  --text: #1a1a1a;\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    --bg: #0a0a0a;\n    --text: #e8e8e8;\n  }\n}\n\n\u002F* 或用 class 切换 *\u002F\nhtml.dark {\n  --bg: #0a0a0a;\n  --text: #e8e8e8;\n  color-scheme: dark;\n}\n",[61,942,943,950,963,975,979,983,991,998,1010,1022,1026,1030,1034,1039,1049,1059,1069,1082],{"__ignoreMap":59},[64,944,945,948],{"class":66,"line":67},[64,946,947],{"class":70},":root",[64,949,75],{"class":74},[64,951,952,956,958,961],{"class":66,"line":78},[64,953,955],{"class":954},"s4XuR","  --bg",[64,957,125],{"class":74},[64,959,960],{"class":81},"#ffffff",[64,962,131],{"class":74},[64,964,965,968,970,973],{"class":66,"line":88},[64,966,967],{"class":954},"  --text",[64,969,125],{"class":74},[64,971,972],{"class":81},"#1a1a1a",[64,974,131],{"class":74},[64,976,977],{"class":66,"line":94},[64,978,91],{"class":74},[64,980,981],{"class":66,"line":101},[64,982,98],{"emptyLinePlaceholder":97},[64,984,985,988],{"class":66,"line":111},[64,986,987],{"class":104},"@media",[64,989,990],{"class":74}," (prefers-color-scheme: dark) {\n",[64,992,993,996],{"class":66,"line":119},[64,994,995],{"class":70},"  :root",[64,997,75],{"class":74},[64,999,1000,1003,1005,1008],{"class":66,"line":134},[64,1001,1002],{"class":954},"    --bg",[64,1004,125],{"class":74},[64,1006,1007],{"class":81},"#0a0a0a",[64,1009,131],{"class":74},[64,1011,1012,1015,1017,1020],{"class":66,"line":155},[64,1013,1014],{"class":954},"    --text",[64,1016,125],{"class":74},[64,1018,1019],{"class":81},"#e8e8e8",[64,1021,131],{"class":74},[64,1023,1024],{"class":66,"line":161},[64,1025,158],{"class":74},[64,1027,1028],{"class":66,"line":281},[64,1029,91],{"class":74},[64,1031,1032],{"class":66,"line":381},[64,1033,98],{"emptyLinePlaceholder":97},[64,1035,1036],{"class":66,"line":499},[64,1037,1038],{"class":296},"\u002F* 或用 class 切换 *\u002F\n",[64,1040,1041,1044,1047],{"class":66,"line":510},[64,1042,1043],{"class":636},"html",[64,1045,1046],{"class":70},".dark",[64,1048,75],{"class":74},[64,1050,1051,1053,1055,1057],{"class":66,"line":654},[64,1052,955],{"class":954},[64,1054,125],{"class":74},[64,1056,1007],{"class":81},[64,1058,131],{"class":74},[64,1060,1061,1063,1065,1067],{"class":66,"line":687},[64,1062,967],{"class":954},[64,1064,125],{"class":74},[64,1066,1019],{"class":81},[64,1068,131],{"class":74},[64,1070,1072,1075,1077,1080],{"class":66,"line":1071},17,[64,1073,1074],{"class":81},"  color-scheme",[64,1076,125],{"class":74},[64,1078,1079],{"class":81},"dark",[64,1081,131],{"class":74},[64,1083,1085],{"class":66,"line":1084},18,[64,1086,91],{"class":74},[26,1088,1089],{"id":1089},"动画",[49,1091,1092],{"id":1092},"过渡",[54,1094,1096],{"className":56,"code":1095,"language":58,"meta":59,"style":59},".btn {\n  transition: all 0.2s ease;\n}\n.btn:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}\n",[61,1097,1098,1105,1126,1130,1137,1156,1195],{"__ignoreMap":59},[64,1099,1100,1103],{"class":66,"line":67},[64,1101,1102],{"class":70},".btn",[64,1104,75],{"class":74},[64,1106,1107,1110,1112,1115,1118,1121,1124],{"class":66,"line":78},[64,1108,1109],{"class":81},"  transition",[64,1111,125],{"class":74},[64,1113,1114],{"class":81},"all",[64,1116,1117],{"class":81}," 0.2",[64,1119,1120],{"class":104},"s",[64,1122,1123],{"class":81}," ease",[64,1125,131],{"class":74},[64,1127,1128],{"class":66,"line":88},[64,1129,91],{"class":74},[64,1131,1132,1135],{"class":66,"line":94},[64,1133,1134],{"class":70},".btn:hover",[64,1136,75],{"class":74},[64,1138,1139,1142,1144,1147,1149,1152,1154],{"class":66,"line":101},[64,1140,1141],{"class":81},"  transform",[64,1143,125],{"class":74},[64,1145,1146],{"class":81},"translateY",[64,1148,203],{"class":74},[64,1150,1151],{"class":81},"-2",[64,1153,540],{"class":104},[64,1155,216],{"class":74},[64,1157,1158,1161,1163,1165,1168,1170,1173,1175,1177,1179,1181,1183,1185,1187,1189,1191,1193],{"class":66,"line":111},[64,1159,1160],{"class":81},"  box-shadow",[64,1162,125],{"class":74},[64,1164,590],{"class":81},[64,1166,1167],{"class":81}," 4",[64,1169,540],{"class":104},[64,1171,1172],{"class":81}," 12",[64,1174,540],{"class":104},[64,1176,778],{"class":81},[64,1178,203],{"class":74},[64,1180,590],{"class":81},[64,1182,209],{"class":74},[64,1184,590],{"class":81},[64,1186,209],{"class":74},[64,1188,590],{"class":81},[64,1190,209],{"class":74},[64,1192,730],{"class":81},[64,1194,216],{"class":74},[64,1196,1197],{"class":66,"line":119},[64,1198,91],{"class":74},[49,1200,1201],{"id":1201},"关键帧",[54,1203,1205],{"className":56,"code":1204,"language":58,"meta":59,"style":59},"@keyframes fadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.animate {\n  animation: fadeIn 0.3s ease both;\n}\n",[61,1206,1207,1217,1224,1235,1253,1257,1264,1274,1288,1292,1296,1300,1307,1327],{"__ignoreMap":59},[64,1208,1209,1212,1215],{"class":66,"line":67},[64,1210,1211],{"class":104},"@keyframes",[64,1213,1214],{"class":954}," fadeIn",[64,1216,75],{"class":74},[64,1218,1219,1222],{"class":66,"line":78},[64,1220,1221],{"class":70},"  from",[64,1223,75],{"class":74},[64,1225,1226,1229,1231,1233],{"class":66,"line":88},[64,1227,1228],{"class":81},"    opacity",[64,1230,125],{"class":74},[64,1232,590],{"class":81},[64,1234,131],{"class":74},[64,1236,1237,1240,1242,1244,1246,1249,1251],{"class":66,"line":94},[64,1238,1239],{"class":81},"    transform",[64,1241,125],{"class":74},[64,1243,1146],{"class":81},[64,1245,203],{"class":74},[64,1247,1248],{"class":81},"10",[64,1250,540],{"class":104},[64,1252,216],{"class":74},[64,1254,1255],{"class":66,"line":101},[64,1256,158],{"class":74},[64,1258,1259,1262],{"class":66,"line":111},[64,1260,1261],{"class":70},"  to",[64,1263,75],{"class":74},[64,1265,1266,1268,1270,1272],{"class":66,"line":119},[64,1267,1228],{"class":81},[64,1269,125],{"class":74},[64,1271,142],{"class":81},[64,1273,131],{"class":74},[64,1275,1276,1278,1280,1282,1284,1286],{"class":66,"line":134},[64,1277,1239],{"class":81},[64,1279,125],{"class":74},[64,1281,1146],{"class":81},[64,1283,203],{"class":74},[64,1285,590],{"class":81},[64,1287,216],{"class":74},[64,1289,1290],{"class":66,"line":155},[64,1291,158],{"class":74},[64,1293,1294],{"class":66,"line":161},[64,1295,91],{"class":74},[64,1297,1298],{"class":66,"line":281},[64,1299,98],{"emptyLinePlaceholder":97},[64,1301,1302,1305],{"class":66,"line":381},[64,1303,1304],{"class":70},".animate",[64,1306,75],{"class":74},[64,1308,1309,1312,1315,1318,1320,1322,1325],{"class":66,"line":499},[64,1310,1311],{"class":81},"  animation",[64,1313,1314],{"class":74},": fadeIn ",[64,1316,1317],{"class":81},"0.3",[64,1319,1120],{"class":104},[64,1321,1123],{"class":81},[64,1323,1324],{"class":81}," both",[64,1326,131],{"class":74},[64,1328,1329],{"class":66,"line":510},[64,1330,91],{"class":74},[49,1332,1333],{"id":1333},"骨架屏",[54,1335,1337],{"className":56,"code":1336,"language":58,"meta":59,"style":59},".skeleton {\n  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);\n  background-size: 200% 100%;\n  animation: shimmer 1.5s infinite;\n}\n\n@keyframes shimmer {\n  0% {\n    background-position: 200% 0;\n  }\n  100% {\n    background-position: -200% 0;\n  }\n}\n",[61,1338,1339,1346,1393,1412,1428,1432,1436,1445,1452,1468,1472,1479,1494,1498],{"__ignoreMap":59},[64,1340,1341,1344],{"class":66,"line":67},[64,1342,1343],{"class":70},".skeleton",[64,1345,75],{"class":74},[64,1347,1348,1350,1352,1354,1356,1359,1361,1363,1366,1369,1372,1374,1377,1380,1382,1384,1386,1389,1391],{"class":66,"line":78},[64,1349,558],{"class":81},[64,1351,125],{"class":74},[64,1353,825],{"class":81},[64,1355,203],{"class":74},[64,1357,1358],{"class":81},"90",[64,1360,833],{"class":104},[64,1362,209],{"class":74},[64,1364,1365],{"class":81},"#f0f0f0",[64,1367,1368],{"class":81}," 25",[64,1370,1371],{"class":104},"%",[64,1373,209],{"class":74},[64,1375,1376],{"class":81},"#e0e0e0",[64,1378,1379],{"class":81}," 50",[64,1381,1371],{"class":104},[64,1383,209],{"class":74},[64,1385,1365],{"class":81},[64,1387,1388],{"class":81}," 75",[64,1390,1371],{"class":104},[64,1392,216],{"class":74},[64,1394,1395,1398,1400,1403,1405,1408,1410],{"class":66,"line":88},[64,1396,1397],{"class":81},"  background-size",[64,1399,125],{"class":74},[64,1401,1402],{"class":81},"200",[64,1404,1371],{"class":104},[64,1406,1407],{"class":81}," 100",[64,1409,1371],{"class":104},[64,1411,131],{"class":74},[64,1413,1414,1416,1419,1421,1423,1426],{"class":66,"line":94},[64,1415,1311],{"class":81},[64,1417,1418],{"class":74},": shimmer ",[64,1420,912],{"class":81},[64,1422,1120],{"class":104},[64,1424,1425],{"class":81}," infinite",[64,1427,131],{"class":74},[64,1429,1430],{"class":66,"line":101},[64,1431,91],{"class":74},[64,1433,1434],{"class":66,"line":111},[64,1435,98],{"emptyLinePlaceholder":97},[64,1437,1438,1440,1443],{"class":66,"line":119},[64,1439,1211],{"class":104},[64,1441,1442],{"class":954}," shimmer",[64,1444,75],{"class":74},[64,1446,1447,1450],{"class":66,"line":134},[64,1448,1449],{"class":70},"  0%",[64,1451,75],{"class":74},[64,1453,1454,1457,1459,1461,1463,1466],{"class":66,"line":155},[64,1455,1456],{"class":81},"    background-position",[64,1458,125],{"class":74},[64,1460,1402],{"class":81},[64,1462,1371],{"class":104},[64,1464,1465],{"class":81}," 0",[64,1467,131],{"class":74},[64,1469,1470],{"class":66,"line":161},[64,1471,158],{"class":74},[64,1473,1474,1477],{"class":66,"line":281},[64,1475,1476],{"class":70},"  100%",[64,1478,75],{"class":74},[64,1480,1481,1483,1485,1488,1490,1492],{"class":66,"line":381},[64,1482,1456],{"class":81},[64,1484,125],{"class":74},[64,1486,1487],{"class":81},"-200",[64,1489,1371],{"class":104},[64,1491,1465],{"class":81},[64,1493,131],{"class":74},[64,1495,1496],{"class":66,"line":499},[64,1497,158],{"class":74},[64,1499,1500],{"class":66,"line":510},[64,1501,91],{"class":74},[26,1503,1504],{"id":1504},"选择器",[54,1506,1508],{"className":56,"code":1507,"language":58,"meta":59,"style":59},"\u002F* 首个\u002F末个 *\u002F\nli:first-child {\n}\nli:last-child {\n}\n\n\u002F* 奇偶行 *\u002F\ntr:nth-child(odd) {\n}\ntr:nth-child(even) {\n}\n\n\u002F* 空元素 *\u002F\ndiv:empty {\n  display: none;\n}\n\n\u002F* 聚焦可见（键盘聚焦） *\u002F\nbutton:focus-visible {\n  outline: 2px solid blue;\n}\n\n\u002F* has 选择器 *\u002F\n.card:has(img) {\n  grid-template-rows: auto 1fr;\n}\n.form:has(:invalid) .submit {\n  opacity: 0.5;\n}\n\n\u002F* 逻辑属性 *\u002F\n.box {\n  margin-inline: auto; \u002F* 左右 margin *\u002F\n  padding-block: 1rem; \u002F* 上下 padding *\u002F\n}\n",[61,1509,1510,1515,1524,1528,1537,1541,1545,1550,1566,1570,1583,1587,1591,1596,1606,1617,1621,1625,1630,1641,1661,1666,1671,1677,1690,1707,1712,1730,1743,1748,1753,1759,1767,1783,1800],{"__ignoreMap":59},[64,1511,1512],{"class":66,"line":67},[64,1513,1514],{"class":296},"\u002F* 首个\u002F末个 *\u002F\n",[64,1516,1517,1519,1522],{"class":66,"line":78},[64,1518,33],{"class":636},[64,1520,1521],{"class":70},":first-child",[64,1523,75],{"class":74},[64,1525,1526],{"class":66,"line":88},[64,1527,91],{"class":74},[64,1529,1530,1532,1535],{"class":66,"line":94},[64,1531,33],{"class":636},[64,1533,1534],{"class":70},":last-child",[64,1536,75],{"class":74},[64,1538,1539],{"class":66,"line":101},[64,1540,91],{"class":74},[64,1542,1543],{"class":66,"line":111},[64,1544,98],{"emptyLinePlaceholder":97},[64,1546,1547],{"class":66,"line":119},[64,1548,1549],{"class":296},"\u002F* 奇偶行 *\u002F\n",[64,1551,1552,1555,1558,1560,1563],{"class":66,"line":134},[64,1553,1554],{"class":636},"tr",[64,1556,1557],{"class":70},":nth-child",[64,1559,203],{"class":74},[64,1561,1562],{"class":81},"odd",[64,1564,1565],{"class":74},") {\n",[64,1567,1568],{"class":66,"line":155},[64,1569,91],{"class":74},[64,1571,1572,1574,1576,1578,1581],{"class":66,"line":161},[64,1573,1554],{"class":636},[64,1575,1557],{"class":70},[64,1577,203],{"class":74},[64,1579,1580],{"class":81},"even",[64,1582,1565],{"class":74},[64,1584,1585],{"class":66,"line":281},[64,1586,91],{"class":74},[64,1588,1589],{"class":66,"line":381},[64,1590,98],{"emptyLinePlaceholder":97},[64,1592,1593],{"class":66,"line":499},[64,1594,1595],{"class":296},"\u002F* 空元素 *\u002F\n",[64,1597,1598,1601,1604],{"class":66,"line":510},[64,1599,1600],{"class":636},"div",[64,1602,1603],{"class":70},":empty",[64,1605,75],{"class":74},[64,1607,1608,1610,1612,1615],{"class":66,"line":654},[64,1609,184],{"class":81},[64,1611,125],{"class":74},[64,1613,1614],{"class":81},"none",[64,1616,131],{"class":74},[64,1618,1619],{"class":66,"line":687},[64,1620,91],{"class":74},[64,1622,1623],{"class":66,"line":1071},[64,1624,98],{"emptyLinePlaceholder":97},[64,1626,1627],{"class":66,"line":1084},[64,1628,1629],{"class":296},"\u002F* 聚焦可见（键盘聚焦） *\u002F\n",[64,1631,1633,1636,1639],{"class":66,"line":1632},19,[64,1634,1635],{"class":636},"button",[64,1637,1638],{"class":70},":focus-visible",[64,1640,75],{"class":74},[64,1642,1644,1647,1649,1652,1654,1656,1659],{"class":66,"line":1643},20,[64,1645,1646],{"class":81},"  outline",[64,1648,125],{"class":74},[64,1650,1651],{"class":81},"2",[64,1653,540],{"class":104},[64,1655,775],{"class":81},[64,1657,1658],{"class":81}," blue",[64,1660,131],{"class":74},[64,1662,1664],{"class":66,"line":1663},21,[64,1665,91],{"class":74},[64,1667,1669],{"class":66,"line":1668},22,[64,1670,98],{"emptyLinePlaceholder":97},[64,1672,1674],{"class":66,"line":1673},23,[64,1675,1676],{"class":296},"\u002F* has 选择器 *\u002F\n",[64,1678,1680,1683,1685,1688],{"class":66,"line":1679},24,[64,1681,1682],{"class":70},".card:has",[64,1684,203],{"class":74},[64,1686,1687],{"class":636},"img",[64,1689,1565],{"class":74},[64,1691,1693,1695,1697,1700,1703,1705],{"class":66,"line":1692},25,[64,1694,260],{"class":81},[64,1696,125],{"class":74},[64,1698,1699],{"class":81},"auto",[64,1701,1702],{"class":81}," 1",[64,1704,145],{"class":104},[64,1706,131],{"class":74},[64,1708,1710],{"class":66,"line":1709},26,[64,1711,91],{"class":74},[64,1713,1715,1718,1720,1723,1725,1728],{"class":66,"line":1714},27,[64,1716,1717],{"class":70},".form:has",[64,1719,203],{"class":74},[64,1721,1722],{"class":70},":invalid",[64,1724,680],{"class":74},[64,1726,1727],{"class":70},".submit",[64,1729,75],{"class":74},[64,1731,1733,1736,1738,1741],{"class":66,"line":1732},28,[64,1734,1735],{"class":81},"  opacity",[64,1737,125],{"class":74},[64,1739,1740],{"class":81},"0.5",[64,1742,131],{"class":74},[64,1744,1746],{"class":66,"line":1745},29,[64,1747,91],{"class":74},[64,1749,1751],{"class":66,"line":1750},30,[64,1752,98],{"emptyLinePlaceholder":97},[64,1754,1756],{"class":66,"line":1755},31,[64,1757,1758],{"class":296},"\u002F* 逻辑属性 *\u002F\n",[64,1760,1762,1765],{"class":66,"line":1761},32,[64,1763,1764],{"class":70},".box",[64,1766,75],{"class":74},[64,1768,1770,1773,1775,1777,1780],{"class":66,"line":1769},33,[64,1771,1772],{"class":81},"  margin-inline",[64,1774,125],{"class":74},[64,1776,1699],{"class":81},[64,1778,1779],{"class":74},"; ",[64,1781,1782],{"class":296},"\u002F* 左右 margin *\u002F\n",[64,1784,1786,1789,1791,1793,1795,1797],{"class":66,"line":1785},34,[64,1787,1788],{"class":81},"  padding-block",[64,1790,125],{"class":74},[64,1792,142],{"class":81},[64,1794,228],{"class":104},[64,1796,1779],{"class":74},[64,1798,1799],{"class":296},"\u002F* 上下 padding *\u002F\n",[64,1801,1803],{"class":66,"line":1802},35,[64,1804,91],{"class":74},[26,1806,1807],{"id":1807},"性能",[54,1809,1811],{"className":56,"code":1810,"language":58,"meta":59,"style":59},"\u002F* 减少重绘 *\u002F\n.animated {\n  will-change: transform;\n  transform: translateZ(0); \u002F* 开启 GPU 加速 *\u002F\n}\n\n\u002F* 内容可见性（懒渲染） *\u002F\n.offscreen {\n  content-visibility: auto;\n  contain-intrinsic-size: 0 500px;\n}\n",[61,1812,1813,1818,1825,1833,1852,1856,1860,1865,1872,1883,1899],{"__ignoreMap":59},[64,1814,1815],{"class":66,"line":67},[64,1816,1817],{"class":296},"\u002F* 减少重绘 *\u002F\n",[64,1819,1820,1823],{"class":66,"line":78},[64,1821,1822],{"class":70},".animated",[64,1824,75],{"class":74},[64,1826,1827,1830],{"class":66,"line":88},[64,1828,1829],{"class":81},"  will-change",[64,1831,1832],{"class":74},": transform;\n",[64,1834,1835,1837,1839,1842,1844,1846,1849],{"class":66,"line":94},[64,1836,1141],{"class":81},[64,1838,125],{"class":74},[64,1840,1841],{"class":81},"translateZ",[64,1843,203],{"class":74},[64,1845,590],{"class":81},[64,1847,1848],{"class":74},"); ",[64,1850,1851],{"class":296},"\u002F* 开启 GPU 加速 *\u002F\n",[64,1853,1854],{"class":66,"line":101},[64,1855,91],{"class":74},[64,1857,1858],{"class":66,"line":111},[64,1859,98],{"emptyLinePlaceholder":97},[64,1861,1862],{"class":66,"line":119},[64,1863,1864],{"class":296},"\u002F* 内容可见性（懒渲染） *\u002F\n",[64,1866,1867,1870],{"class":66,"line":134},[64,1868,1869],{"class":70},".offscreen",[64,1871,75],{"class":74},[64,1873,1874,1877,1879,1881],{"class":66,"line":155},[64,1875,1876],{"class":81},"  content-visibility",[64,1878,125],{"class":74},[64,1880,1699],{"class":81},[64,1882,131],{"class":74},[64,1884,1885,1888,1890,1892,1895,1897],{"class":66,"line":161},[64,1886,1887],{"class":81},"  contain-intrinsic-size",[64,1889,125],{"class":74},[64,1891,590],{"class":81},[64,1893,1894],{"class":81}," 500",[64,1896,540],{"class":104},[64,1898,131],{"class":74},[64,1900,1901],{"class":66,"line":281},[64,1902,91],{"class":74},[26,1904,1905],{"id":1905},"常见问题",[49,1907,1908],{"id":1908},"为什么布局总是越修越乱",[22,1910,1911],{},"通常是因为：",[30,1913,1914,1917,1920],{},[33,1915,1916],{},"没有建立统一布局模型",[33,1918,1919],{},"过多依赖绝对定位",[33,1921,1922],{},"不清楚块级、行内、Flex、Grid 的边界",[49,1924,1925],{"id":1925},"为什么暗色模式切过去很奇怪",[22,1927,1928],{},"高频原因包括：",[30,1930,1931,1934,1937],{},[33,1932,1933],{},"只改了背景，没改文字和边框",[33,1935,1936],{},"组件局部变量没有统一",[33,1938,1939],{},"图片、阴影和半透明层没有重新检查",[49,1941,1943],{"id":1942},"css-技巧要不要全记住","CSS 技巧要不要全记住",[22,1945,1946],{},"不需要。更重要的是先掌握高频模式，把常用片段沉淀成自己的模板。",[26,1948,1949],{"id":1949},"延伸阅读",[30,1951,1952,1959,1965],{},[33,1953,1954],{},[1955,1956,1958],"a",{"href":1957},"\u002Fdocs\u002Ftailwindcss-unocss","UnoCSS \u002F Tailwind CSS 速查",[33,1960,1961],{},[1955,1962,1964],{"href":1963},"\u002Fdocs\u002Fnuxt-vue-notes","Nuxt \u002F Vue 开发笔记",[33,1966,1967],{},[1955,1968,1970],{"href":1969},"\u002Fdocs\u002Fdesign-resources","设计资源库",[26,1972,1973],{"id":1973},"参考链接",[30,1975,1976,1985,1993,2001],{},[33,1977,1978,1984],{},[1955,1979,1983],{"href":1980,"rel":1981},"https:\u002F\u002Fcss-tricks.com\u002F",[1982],"nofollow","CSS Tricks"," — 技巧与教程",[33,1986,1987,1992],{},[1955,1988,1991],{"href":1989,"rel":1990},"https:\u002F\u002Fmoderncss.dev\u002F",[1982],"Modern CSS"," — 现代 CSS 方案",[33,1994,1995,2000],{},[1955,1996,1999],{"href":1997,"rel":1998},"https:\u002F\u002Fcaniuse.com\u002F",[1982],"Can I Use"," — 浏览器兼容性",[33,2002,2003,2008],{},[1955,2004,2007],{"href":2005,"rel":2006},"https:\u002F\u002Fdefensivecss.dev\u002F",[1982],"Defensive CSS"," — 防御性 CSS",[2010,2011,2012],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":59,"searchDepth":78,"depth":78,"links":2014},[2015,2016,2021,2028,2029,2034,2035,2036,2041,2042],{"id":28,"depth":78,"text":28},{"id":47,"depth":78,"text":47,"children":2017},[2018,2019,2020],{"id":51,"depth":88,"text":52},{"id":166,"depth":88,"text":167},{"id":286,"depth":88,"text":286},{"id":386,"depth":78,"text":386,"children":2022},[2023,2024,2025,2026,2027],{"id":389,"depth":88,"text":389},{"id":515,"depth":88,"text":515},{"id":692,"depth":88,"text":692},{"id":804,"depth":88,"text":804},{"id":886,"depth":88,"text":886},{"id":937,"depth":78,"text":937},{"id":1089,"depth":78,"text":1089,"children":2030},[2031,2032,2033],{"id":1092,"depth":88,"text":1092},{"id":1201,"depth":88,"text":1201},{"id":1333,"depth":88,"text":1333},{"id":1504,"depth":78,"text":1504},{"id":1807,"depth":78,"text":1807},{"id":1905,"depth":78,"text":1905,"children":2037},[2038,2039,2040],{"id":1908,"depth":88,"text":1908},{"id":1925,"depth":88,"text":1925},{"id":1942,"depth":88,"text":1943},{"id":1949,"depth":78,"text":1949},{"id":1973,"depth":78,"text":1973},{"path":2044,"title":2045,"description":2046,"docType":8,"resourceKind":9,"categoryId":2047,"categoryLabel":2048,"updatedAt":12,"publishedAt":12,"icon":2049},"\u002Fdocs\u002Fcloudflare-pages-deploy","Cloudflare Pages 部署指南","Cloudflare Pages 项目部署、自定义域名、环境变量、重定向与 Functions","infra-deployment","服务器与部署","i-carbon-cloud",{"path":2051,"title":2052,"description":2053,"docType":8,"resourceKind":9,"categoryId":2054,"categoryLabel":2055,"updatedAt":12,"publishedAt":12,"icon":2056},"\u002Fdocs\u002Fmcp-server-development","MCP 服务器开发指南","Model Context Protocol 服务器开发教程，为 AI 代理提供自定义工具","ai-tools","AI 工具","i-carbon-chat-bot",[2058,2059,2060],"希望把零散经验整理成长期可复用工作流的人","想先建立认知，再决定是否深入实践的人","希望阅读时顺手建立自己的操作清单或收藏体系的人",[2062,2063,2064],"先浏览标题、摘要和目录，带着问题阅读会更高效","顺手记录真正对你有用的命令、链接和注意事项，避免重复搜索","如果页面里提到相关文档，尽量一起打开对照，效果通常更完整",[2066,2070,2074,2078],{"path":2067,"title":2068,"description":2069,"docType":8,"resourceKind":9,"categoryId":10,"categoryLabel":11,"updatedAt":12,"publishedAt":12,"icon":13},"\u002Fdocs\u002Ftesting-guide","前端测试指南","Vitest 单元测试、Playwright E2E 测试、测试策略与最佳实践",{"path":2071,"title":2072,"description":2073,"docType":8,"resourceKind":9,"categoryId":10,"categoryLabel":11,"updatedAt":12,"publishedAt":12,"icon":13},"\u002Fdocs\u002Fbun-deno","Bun 与 Deno 运行时","Bun 和 Deno 的安装使用、与 Node.js 对比、包管理与实用命令",{"path":2075,"title":2076,"description":2077,"docType":8,"resourceKind":9,"categoryId":10,"categoryLabel":11,"updatedAt":12,"publishedAt":12,"icon":13},"\u002Fdocs\u002Fredis-guide","Redis 使用指南","Redis 安装、数据类型、常用命令、缓存策略与 Node.js 集成",{"path":2079,"title":2080,"description":2081,"docType":8,"resourceKind":9,"categoryId":10,"categoryLabel":11,"updatedAt":2082,"publishedAt":2082,"icon":13},"\u002Fdocs\u002Fdatabase-basics","数据库基础速查","SQLite、PostgreSQL、MySQL 常用操作、SQL 语法与 GUI 工具推荐","2026-02-27",1776215712472]