[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"knowledge-\u002Fapi\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fnew-css":3,"knowledge-related-\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fnew-css":1842,"knowledge-series-\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fnew-css":1865},{"source":4,"connector":5,"page":6},"sqlite","better-sqlite3",{"path":7,"title":8,"description":9,"category":10,"tags":11,"date":13,"pinned":14,"draft":14,"body":15,"seo":1838,"stem":1839,"id":1840,"extension":1841},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fnew-css","现代 CSS 特性概览","W3C 以独立模块持续演进 CSS（并无官方的「CSS4」版本号）。下列特性在现代浏览器中已广泛可用，用于布局、组件化样式与国际化；细节可跳转专题文档。","技能小册",[12],"css","2021-11-09",false,{"type":16,"value":17,"toc":1814},"minimark",[18,22,31,35,116,251,274,278,292,372,375,383,390,473,480,530,540,547,598,711,719,733,786,793,800,900,910,913,1045,1219,1222,1321,1324,1386,1470,1476,1479,1578,1581,1607,1610,1635,1638,1641,1810],[19,20,8],"h1",{"id":21},"现代-css-特性概览",[23,24,25,26,30],"p",{},"W3C 以",[27,28,29],"strong",{},"独立模块","持续演进 CSS（并无官方的「CSS4」版本号）。下列特性在现代浏览器中已广泛可用，用于布局、组件化样式与国际化；细节可跳转专题文档。",[32,33,34],"h2",{"id":34},"布局",[36,37,38,51],"table",{},[39,40,41],"thead",{},[42,43,44,48],"tr",{},[45,46,47],"th",{},"特性",[45,49,50],{},"文档",[52,53,54,67,78,89,102],"tbody",{},[42,55,56,64],{},[57,58,59],"td",{},[60,61,63],"a",{"href":62},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fflex","Flexbox 弹性盒",[57,65,66],{},"一维排列与对齐",[42,68,69,75],{},[57,70,71],{},[60,72,74],{"href":73},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fgrid","Grid 网格",[57,76,77],{},"二维轨道与区域",[42,79,80,86],{},[57,81,82],{},[60,83,85],{"href":84},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fresponsive","容器查询",[57,87,88],{},"按父容器而非视口响应",[42,90,91,96],{},[57,92,93],{},[27,94,95],{},"Subgrid",[57,97,98,99],{},"子网格继承父网格轨道，嵌套对齐列\u002F行；见 ",[60,100,101],{"href":73},"Grid",[42,103,104,109],{},[57,105,106],{},[27,107,108],{},"原生 CSS 嵌套",[57,110,111,112],{},"无 Sass 变量\u002F混入，仅选择器嵌套；见 ",[60,113,115],{"href":114},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-syntax","Sass · 语法基础",[117,118,122],"pre",{"className":119,"code":120,"language":12,"meta":121,"style":121},"language-css shiki shiki-themes material-theme-lighter github-light github-dark",".parent {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n}\n.child {\n    display: grid;\n    grid-template-columns: subgrid;\n    grid-column: span 3;\n}\n","",[123,124,125,142,159,191,197,207,218,230,246],"code",{"__ignoreMap":121},[126,127,130,134,138],"span",{"class":128,"line":129},"line",1,[126,131,133],{"class":132},"stp6e",".",[126,135,137],{"class":136},"sbgvK","parent",[126,139,141],{"class":140},"sP7_E"," {\n",[126,143,145,149,152,156],{"class":128,"line":144},2,[126,146,148],{"class":147},"soE4H","    display",[126,150,151],{"class":140},":",[126,153,155],{"class":154},"s_hVV"," grid",[126,157,158],{"class":140},";\n",[126,160,162,165,167,171,174,178,181,184,188],{"class":128,"line":161},3,[126,163,164],{"class":147},"    grid-template-columns",[126,166,151],{"class":140},[126,168,170],{"class":169},"sptTA"," repeat",[126,172,173],{"class":140},"(",[126,175,177],{"class":176},"srdBf","3",[126,179,180],{"class":140},",",[126,182,183],{"class":176}," 1",[126,185,187],{"class":186},"sw1J6","fr",[126,189,190],{"class":140},");\n",[126,192,194],{"class":128,"line":193},4,[126,195,196],{"class":140},"}\n",[126,198,200,202,205],{"class":128,"line":199},5,[126,201,133],{"class":132},[126,203,204],{"class":136},"child",[126,206,141],{"class":140},[126,208,210,212,214,216],{"class":128,"line":209},6,[126,211,148],{"class":147},[126,213,151],{"class":140},[126,215,155],{"class":154},[126,217,158],{"class":140},[126,219,221,223,225,228],{"class":128,"line":220},7,[126,222,164],{"class":147},[126,224,151],{"class":140},[126,226,227],{"class":154}," subgrid",[126,229,158],{"class":140},[126,231,233,236,238,242,244],{"class":128,"line":232},8,[126,234,235],{"class":147},"    grid-column",[126,237,151],{"class":140},[126,239,241],{"class":240},"su5hD"," span ",[126,243,177],{"class":176},[126,245,158],{"class":140},[126,247,249],{"class":128,"line":248},9,[126,250,196],{"class":140},[23,252,253,256,257,260,261,264,265,267,268,273],{},[123,254,255],{},"subgrid"," 需子项为 grid 容器，并在 ",[123,258,259],{},"grid-template-rows"," \u002F ",[123,262,263],{},"grid-template-columns"," 中使用 ",[123,266,255],{}," 关键字；浏览器支持见 MDN ",[60,269,255],{"href":270,"rel":271},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002FCSS_grid_layout\u002FSubgrid",[272],"nofollow"," 兼容性表。",[32,275,277],{"id":276},"逻辑属性国际化","逻辑属性（国际化）",[23,279,280,281,284,285,260,288,291],{},"按**行向（inline）",[27,282,283],{},"与","块向（block）**描述尺寸与间距，随 ",[123,286,287],{},"writing-mode",[123,289,290],{},"direction"," 自动映射物理方向（LTR\u002FRTL）。",[36,293,294,304],{},[39,295,296],{},[42,297,298,301],{},[45,299,300],{},"物理属性",[45,302,303],{},"逻辑属性示例",[52,305,306,318,330,342,354],{},[42,307,308,313],{},[57,309,310],{},[123,311,312],{},"width",[57,314,315],{},[123,316,317],{},"inline-size",[42,319,320,325],{},[57,321,322],{},[123,323,324],{},"height",[57,326,327],{},[123,328,329],{},"block-size",[42,331,332,337],{},[57,333,334],{},[123,335,336],{},"margin-left",[57,338,339],{},[123,340,341],{},"margin-inline-start",[42,343,344,349],{},[57,345,346],{},[123,347,348],{},"padding-top",[57,350,351],{},[123,352,353],{},"padding-block-start",[42,355,356,364],{},[57,357,358,260,361],{},[123,359,360],{},"left",[123,362,363],{},"right",[57,365,366,260,369],{},[123,367,368],{},"inset-inline-start",[123,370,371],{},"inset-inline-end",[32,373,374],{"id":374},"选择器",[376,377,379,382],"h3",{"id":378},"has关系伪类",[123,380,381],{},":has()","（关系伪类）",[23,384,385,386,389],{},"根据",[27,387,388],{},"子树或后续兄弟","是否匹配，为祖先或前面的元素设样式（常称「父选择器」，实为关系选择器）。",[117,391,393],{"className":119,"code":392,"language":12,"meta":121,"style":121},".card:has(img) {\n    padding: 0;\n}\n.form:has(:invalid) {\n    border-color: red;\n}\n",[123,394,395,419,431,435,457,469],{"__ignoreMap":121},[126,396,397,399,402,404,408,410,414,417],{"class":128,"line":129},[126,398,133],{"class":132},[126,400,401],{"class":136},"card",[126,403,151],{"class":132},[126,405,407],{"class":406},"s9AJx","has",[126,409,173],{"class":140},[126,411,413],{"class":412},"s83vy","img",[126,415,416],{"class":140},")",[126,418,141],{"class":140},[126,420,421,424,426,429],{"class":128,"line":144},[126,422,423],{"class":147},"    padding",[126,425,151],{"class":140},[126,427,428],{"class":176}," 0",[126,430,158],{"class":140},[126,432,433],{"class":128,"line":161},[126,434,196],{"class":140},[126,436,437,439,442,444,446,448,450,453,455],{"class":128,"line":193},[126,438,133],{"class":132},[126,440,441],{"class":136},"form",[126,443,151],{"class":132},[126,445,407],{"class":406},[126,447,173],{"class":140},[126,449,151],{"class":132},[126,451,452],{"class":406},"invalid",[126,454,416],{"class":140},[126,456,141],{"class":140},[126,458,459,462,464,467],{"class":128,"line":199},[126,460,461],{"class":147},"    border-color",[126,463,151],{"class":140},[126,465,466],{"class":154}," red",[126,468,158],{"class":140},[126,470,471],{"class":128,"line":209},[126,472,196],{"class":140},[376,474,476,479],{"id":475},"not-多参数",[123,477,478],{},":not()"," 多参数",[117,481,483],{"className":119,"code":482,"language":12,"meta":121,"style":121},"article :not(h1, h2, h3) {\n    line-height: 1.6;\n}\n",[123,484,485,514,526],{"__ignoreMap":121},[126,486,487,490,493,496,498,500,502,505,507,510,512],{"class":128,"line":129},[126,488,489],{"class":412},"article",[126,491,492],{"class":132}," :",[126,494,495],{"class":406},"not",[126,497,173],{"class":140},[126,499,19],{"class":412},[126,501,180],{"class":140},[126,503,504],{"class":412}," h2",[126,506,180],{"class":140},[126,508,509],{"class":412}," h3",[126,511,416],{"class":140},[126,513,141],{"class":140},[126,515,516,519,521,524],{"class":128,"line":144},[126,517,518],{"class":147},"    line-height",[126,520,151],{"class":140},[126,522,523],{"class":176}," 1.6",[126,525,158],{"class":140},[126,527,528],{"class":128,"line":161},[126,529,196],{"class":140},[376,531,533,536,537],{"id":532},"is-与-where",[123,534,535],{},":is()"," 与 ",[123,538,539],{},":where()",[23,541,542,543,546],{},"二者都接受",[27,544,545],{},"选择器列表","，简化重复书写；特异性不同：",[36,548,549,562],{},[39,550,551],{},[42,552,553,556,559],{},[45,554,555],{},"伪类",[45,557,558],{},"特异性",[45,560,561],{},"典型用途",[52,563,564,583],{},[42,565,566,571,577],{},[57,567,568],{},[123,569,570],{},":is(.a, .b)",[57,572,573,574,558],{},"取列表中",[27,575,576],{},"最高",[57,578,579,580],{},"合并多种状态：",[123,581,582],{},"button:is(:hover, :focus-visible)",[42,584,585,590,595],{},[57,586,587],{},[123,588,589],{},":where(.a, .b)",[57,591,592],{},[27,593,594],{},"恒为 0",[57,596,597],{},"低优先级重置，便于后续覆盖",[117,599,601],{"className":119,"code":600,"language":12,"meta":121,"style":121},":where(ul, ol) {\n    margin-block: 0;\n    padding-inline-start: 1.5rem;\n}\n.card:is(.featured, :has(.badge)) {\n    border-color: var(--accent);\n}\n",[123,602,603,624,635,650,654,690,707],{"__ignoreMap":121},[126,604,605,607,610,612,615,617,620,622],{"class":128,"line":129},[126,606,151],{"class":132},[126,608,609],{"class":406},"where",[126,611,173],{"class":140},[126,613,614],{"class":412},"ul",[126,616,180],{"class":140},[126,618,619],{"class":412}," ol",[126,621,416],{"class":140},[126,623,141],{"class":140},[126,625,626,629,631,633],{"class":128,"line":144},[126,627,628],{"class":147},"    margin-block",[126,630,151],{"class":140},[126,632,428],{"class":176},[126,634,158],{"class":140},[126,636,637,640,642,645,648],{"class":128,"line":161},[126,638,639],{"class":147},"    padding-inline-start",[126,641,151],{"class":140},[126,643,644],{"class":176}," 1.5",[126,646,647],{"class":186},"rem",[126,649,158],{"class":140},[126,651,652],{"class":128,"line":193},[126,653,196],{"class":140},[126,655,656,658,660,662,665,667,669,672,674,676,678,680,682,685,688],{"class":128,"line":199},[126,657,133],{"class":132},[126,659,401],{"class":136},[126,661,151],{"class":132},[126,663,664],{"class":406},"is",[126,666,173],{"class":140},[126,668,133],{"class":132},[126,670,671],{"class":136},"featured",[126,673,180],{"class":140},[126,675,492],{"class":132},[126,677,407],{"class":406},[126,679,173],{"class":140},[126,681,133],{"class":132},[126,683,684],{"class":136},"badge",[126,686,687],{"class":140},"))",[126,689,141],{"class":140},[126,691,692,694,696,699,701,705],{"class":128,"line":209},[126,693,461],{"class":147},[126,695,151],{"class":140},[126,697,698],{"class":169}," var",[126,700,173],{"class":140},[126,702,704],{"class":703},"sMMDD","--accent",[126,706,190],{"class":140},[126,708,709],{"class":128,"line":220},[126,710,196],{"class":140},[32,712,714,715,718],{"id":713},"作用域scope","作用域（",[123,716,717],{},"@scope","）",[23,720,721,722,725,726,728,729,732],{},"将选择器匹配限制在",[27,723,724],{},"某一子树","内，并可声明与全局样式的边界（",[123,727,717],{}," … ",[123,730,731],{},"to","），减少「工具类误伤组件内部」或 BEM 层级过深的问题。",[117,734,736],{"className":119,"code":735,"language":12,"meta":121,"style":121},"@scope (.card) to (.card > *) {\n    .title {\n        font-size: 1.25rem;\n    } \u002F* 仅 .card 内部生效，且受 to 边界约束 *\u002F\n}\n",[123,737,738,749,759,773,782],{"__ignoreMap":121},[126,739,740,743,746],{"class":128,"line":129},[126,741,717],{"class":742},"sVHd0",[126,744,745],{"class":240}," (.card) to (.card > *) ",[126,747,748],{"class":140},"{\n",[126,750,751,754,757],{"class":128,"line":144},[126,752,753],{"class":132},"    .",[126,755,756],{"class":136},"title",[126,758,141],{"class":140},[126,760,761,764,766,769,771],{"class":128,"line":161},[126,762,763],{"class":147},"        font-size",[126,765,151],{"class":140},[126,767,768],{"class":176}," 1.25",[126,770,647],{"class":186},[126,772,158],{"class":140},[126,774,775,778],{"class":128,"line":193},[126,776,777],{"class":140},"    }",[126,779,781],{"class":780},"sutJx"," \u002F* 仅 .card 内部生效，且受 to 边界约束 *\u002F\n",[126,783,784],{"class":128,"line":199},[126,785,196],{"class":140},[32,787,789,790,718],{"id":788},"层叠层layer","层叠层（",[123,791,792],{},"@layer",[23,794,795,796,799],{},"显式控制",[27,797,798],{},"层叠顺序","：后声明的层优先级高于先声明的层（同一层内仍按选择器特异性）。",[117,801,803],{"className":119,"code":802,"language":12,"meta":121,"style":121},"@layer reset, base, components, utilities;\n\n@layer components {\n    .btn {\n        background: blue;\n    }\n}\n@layer utilities {\n    .btn {\n        background: red;\n    } \u002F* 覆盖 components 中的 .btn *\u002F\n}\n",[123,804,805,814,820,829,838,850,855,859,868,876,887,895],{"__ignoreMap":121},[126,806,807,809,812],{"class":128,"line":129},[126,808,792],{"class":742},[126,810,811],{"class":240}," reset, base, components, utilities",[126,813,158],{"class":140},[126,815,816],{"class":128,"line":144},[126,817,819],{"emptyLinePlaceholder":818},true,"\n",[126,821,822,824,827],{"class":128,"line":161},[126,823,792],{"class":742},[126,825,826],{"class":240}," components ",[126,828,748],{"class":140},[126,830,831,833,836],{"class":128,"line":193},[126,832,753],{"class":132},[126,834,835],{"class":136},"btn",[126,837,141],{"class":140},[126,839,840,843,845,848],{"class":128,"line":199},[126,841,842],{"class":147},"        background",[126,844,151],{"class":140},[126,846,847],{"class":154}," blue",[126,849,158],{"class":140},[126,851,852],{"class":128,"line":209},[126,853,854],{"class":140},"    }\n",[126,856,857],{"class":128,"line":220},[126,858,196],{"class":140},[126,860,861,863,866],{"class":128,"line":232},[126,862,792],{"class":742},[126,864,865],{"class":240}," utilities ",[126,867,748],{"class":140},[126,869,870,872,874],{"class":128,"line":248},[126,871,753],{"class":132},[126,873,835],{"class":136},[126,875,141],{"class":140},[126,877,879,881,883,885],{"class":128,"line":878},10,[126,880,842],{"class":147},[126,882,151],{"class":140},[126,884,466],{"class":154},[126,886,158],{"class":140},[126,888,890,892],{"class":128,"line":889},11,[126,891,777],{"class":140},[126,893,894],{"class":780}," \u002F* 覆盖 components 中的 .btn *\u002F\n",[126,896,898],{"class":128,"line":897},12,[126,899,196],{"class":140},[23,901,902,903,905,906,909],{},"未放入 ",[123,904,792],{}," 的样式优先级高于所有命名层。用于拆分 reset、组件库与工具类，减少 ",[123,907,908],{},"!important"," 滥用。",[32,911,912],{"id":912},"组件与样式",[36,914,915,924],{},[39,916,917],{},[42,918,919,921],{},[45,920,47],{},[45,922,923],{},"说明",[52,925,926,938,950,968,986,998,1014,1033],{},[42,927,928,932],{},[57,929,930],{},[27,931,85],{},[57,933,934,935],{},"见 ",[60,936,937],{"href":84},"响应式",[42,939,940,947],{},[57,941,942],{},[27,943,944],{},[123,945,946],{},"accent-color",[57,948,949],{},"原生控件（checkbox、radio、range 等）强调色",[42,951,952,960],{},[57,953,954],{},[27,955,956,957],{},"Flex ",[123,958,959],{},"gap",[57,961,962,965,966],{},[60,963,964],{"href":62},"Flex"," 与 Grid 均支持 ",[123,967,959],{},[42,969,970,980],{},[57,971,972],{},[27,973,974,260,977],{},[123,975,976],{},"color-mix()",[123,978,979],{},"oklch()",[57,981,934,982],{},[60,983,985],{"href":984},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fcolor","颜色与背景",[42,987,988,995],{},[57,989,990],{},[27,991,992],{},[123,993,994],{},"color-scheme",[57,996,997],{},"告知 UA 页面倾向浅色\u002F深色，影响滚动条、表单控件等默认绘制",[42,999,1000,1007],{},[57,1001,1002],{},[27,1003,1004],{},[123,1005,1006],{},"light-dark()",[57,1008,1009,1010,1013],{},"在 ",[123,1011,1012],{},"color-scheme: light dark"," 下按用户配色方案取不同颜色值",[42,1015,1016,1023],{},[57,1017,1018],{},[27,1019,1020],{},[123,1021,1022],{},"aspect-ratio",[57,1024,1025,1026,1029,1030],{},"在宽或高为 ",[123,1027,1028],{},"auto"," 时维持宽高比，如 ",[123,1031,1032],{},"aspect-ratio: 16 \u002F 9",[42,1034,1035,1042],{},[57,1036,1037],{},[27,1038,1039],{},[123,1040,1041],{},"@property",[57,1043,1044],{},"注册自定义属性类型、继承与初始值，便于动画插值",[117,1046,1048],{"className":119,"code":1047,"language":12,"meta":121,"style":121},":root {\n    accent-color: #ff4757;\n    color-scheme: light dark;\n    --text: light-dark(#222, #eee);\n}\n.video {\n    aspect-ratio: 16 \u002F 9;\n    width: 100%;\n    height: auto;\n}\n@property --progress {\n    syntax: \"\u003Cpercentage>\";\n    inherits: false;\n    initial-value: 0%;\n}\n",[123,1049,1050,1059,1075,1090,1117,1121,1130,1147,1162,1174,1178,1187,1199,1205,1214],{"__ignoreMap":121},[126,1051,1052,1054,1057],{"class":128,"line":129},[126,1053,151],{"class":132},[126,1055,1056],{"class":406},"root",[126,1058,141],{"class":140},[126,1060,1061,1064,1066,1070,1073],{"class":128,"line":144},[126,1062,1063],{"class":147},"    accent-color",[126,1065,151],{"class":140},[126,1067,1069],{"class":1068},"s39Yj"," #",[126,1071,1072],{"class":154},"ff4757",[126,1074,158],{"class":140},[126,1076,1077,1080,1082,1085,1088],{"class":128,"line":161},[126,1078,1079],{"class":147},"    color-scheme",[126,1081,151],{"class":140},[126,1083,1084],{"class":154}," light",[126,1086,1087],{"class":154}," dark",[126,1089,158],{"class":140},[126,1091,1092,1095,1097,1100,1103,1106,1108,1110,1113,1115],{"class":128,"line":193},[126,1093,1094],{"class":703},"    --text",[126,1096,151],{"class":140},[126,1098,1099],{"class":240}," light-dark(",[126,1101,1102],{"class":1068},"#",[126,1104,1105],{"class":154},"222",[126,1107,180],{"class":140},[126,1109,1069],{"class":1068},[126,1111,1112],{"class":154},"eee",[126,1114,416],{"class":240},[126,1116,158],{"class":140},[126,1118,1119],{"class":128,"line":199},[126,1120,196],{"class":140},[126,1122,1123,1125,1128],{"class":128,"line":209},[126,1124,133],{"class":132},[126,1126,1127],{"class":136},"video",[126,1129,141],{"class":140},[126,1131,1132,1135,1137,1140,1142,1145],{"class":128,"line":220},[126,1133,1134],{"class":147},"    aspect-ratio",[126,1136,151],{"class":140},[126,1138,1139],{"class":176}," 16",[126,1141,260],{"class":240},[126,1143,1144],{"class":176},"9",[126,1146,158],{"class":140},[126,1148,1149,1152,1154,1157,1160],{"class":128,"line":232},[126,1150,1151],{"class":147},"    width",[126,1153,151],{"class":140},[126,1155,1156],{"class":176}," 100",[126,1158,1159],{"class":186},"%",[126,1161,158],{"class":140},[126,1163,1164,1167,1169,1172],{"class":128,"line":248},[126,1165,1166],{"class":147},"    height",[126,1168,151],{"class":140},[126,1170,1171],{"class":154}," auto",[126,1173,158],{"class":140},[126,1175,1176],{"class":128,"line":878},[126,1177,196],{"class":140},[126,1179,1180,1182,1185],{"class":128,"line":889},[126,1181,1041],{"class":742},[126,1183,1184],{"class":240}," --progress ",[126,1186,748],{"class":140},[126,1188,1189,1192,1196],{"class":128,"line":897},[126,1190,1191],{"class":240},"    syntax: \"\u003Cpercentage",[126,1193,1195],{"class":1194},"smGrS",">",[126,1197,1198],{"class":240},"\";\n",[126,1200,1202],{"class":128,"line":1201},13,[126,1203,1204],{"class":240},"    inherits: false;\n",[126,1206,1208,1211],{"class":128,"line":1207},14,[126,1209,1210],{"class":412},"    initial-value",[126,1212,1213],{"class":240},": 0%;\n",[126,1215,1217],{"class":128,"line":1216},15,[126,1218,196],{"class":240},[32,1220,1221],{"id":1221},"排版",[117,1223,1225],{"className":119,"code":1224,"language":12,"meta":121,"style":121},"\u002F* 流式字号，见 font-unit.md *\u002F\nh1 {\n    font-size: clamp(1.5rem, 5vw + 1rem, 3rem);\n}\n\n\u002F* 首字下沉（initial-letter）；支持度见 MDN 兼容性表 *\u002F\np::first-letter {\n    initial-letter: 2;\n}\n",[123,1226,1227,1232,1238,1280,1284,1288,1293,1305,1317],{"__ignoreMap":121},[126,1228,1229],{"class":128,"line":129},[126,1230,1231],{"class":780},"\u002F* 流式字号，见 font-unit.md *\u002F\n",[126,1233,1234,1236],{"class":128,"line":144},[126,1235,19],{"class":412},[126,1237,141],{"class":140},[126,1239,1240,1243,1245,1248,1250,1253,1255,1257,1260,1263,1267,1269,1271,1273,1276,1278],{"class":128,"line":161},[126,1241,1242],{"class":147},"    font-size",[126,1244,151],{"class":140},[126,1246,1247],{"class":169}," clamp",[126,1249,173],{"class":140},[126,1251,1252],{"class":176},"1.5",[126,1254,647],{"class":186},[126,1256,180],{"class":140},[126,1258,1259],{"class":176}," 5",[126,1261,1262],{"class":186},"vw",[126,1264,1266],{"class":1265},"s99_P"," +",[126,1268,183],{"class":176},[126,1270,647],{"class":186},[126,1272,180],{"class":140},[126,1274,1275],{"class":176}," 3",[126,1277,647],{"class":186},[126,1279,190],{"class":140},[126,1281,1282],{"class":128,"line":193},[126,1283,196],{"class":140},[126,1285,1286],{"class":128,"line":199},[126,1287,819],{"emptyLinePlaceholder":818},[126,1289,1290],{"class":128,"line":209},[126,1291,1292],{"class":780},"\u002F* 首字下沉（initial-letter）；支持度见 MDN 兼容性表 *\u002F\n",[126,1294,1295,1297,1300,1303],{"class":128,"line":220},[126,1296,23],{"class":412},[126,1298,1299],{"class":132},"::",[126,1301,1302],{"class":406},"first-letter",[126,1304,141],{"class":140},[126,1306,1307,1310,1312,1315],{"class":128,"line":232},[126,1308,1309],{"class":147},"    initial-letter",[126,1311,151],{"class":140},[126,1313,1314],{"class":176}," 2",[126,1316,158],{"class":140},[126,1318,1319],{"class":128,"line":248},[126,1320,196],{"class":140},[32,1322,1323],{"id":1323},"滚动与视图过渡",[36,1325,1326,1334],{},[39,1327,1328],{},[42,1329,1330,1332],{},[45,1331,47],{},[45,1333,923],{},[52,1335,1336,1350,1367],{},[42,1337,1338,1343],{},[57,1339,1340],{},[27,1341,1342],{},"Scroll-driven animations",[57,1344,1345,1346,1349],{},"用 ",[123,1347,1348],{},"animation-timeline: scroll()"," 等将动画与滚动进度绑定（见 MDN）",[42,1351,1352,1357],{},[57,1353,1354],{},[27,1355,1356],{},"View Transitions API",[57,1358,1359,1360,536,1363,1366],{},"文档\u002F同文档导航间通过 ",[123,1361,1362],{},"view-transition-name",[123,1364,1365],{},"::view-transition-*"," 做过渡（多用于 SPA 路由切换）",[42,1368,1369,1376],{},[57,1370,1371],{},[27,1372,1373],{},[123,1374,1375],{},"scroll-snap",[57,1377,1378,1381,1382,1385],{},[123,1379,1380],{},"scroll-snap-type"," + ",[123,1383,1384],{},"scroll-snap-align"," 实现轮播、分页吸附",[117,1387,1389],{"className":119,"code":1388,"language":12,"meta":121,"style":121},"@supports (animation-timeline: scroll()) {\n    .progress {\n        animation: grow linear forwards;\n        animation-timeline: scroll(nearest block);\n    }\n}\n",[123,1390,1391,1416,1425,1443,1462,1466],{"__ignoreMap":121},[126,1392,1393,1396,1399,1402,1404,1407,1409,1411,1414],{"class":128,"line":129},[126,1394,1395],{"class":742},"@supports",[126,1397,1398],{"class":140}," (",[126,1400,1401],{"class":154},"animation-timeline",[126,1403,151],{"class":140},[126,1405,1406],{"class":154}," scroll",[126,1408,173],{"class":240},[126,1410,416],{"class":140},[126,1412,1413],{"class":240},") ",[126,1415,748],{"class":140},[126,1417,1418,1420,1423],{"class":128,"line":144},[126,1419,753],{"class":132},[126,1421,1422],{"class":136},"progress",[126,1424,141],{"class":140},[126,1426,1427,1430,1432,1435,1438,1441],{"class":128,"line":161},[126,1428,1429],{"class":147},"        animation",[126,1431,151],{"class":140},[126,1433,1434],{"class":240}," grow ",[126,1436,1437],{"class":154},"linear",[126,1439,1440],{"class":154}," forwards",[126,1442,158],{"class":140},[126,1444,1445,1448,1450,1452,1455,1458,1460],{"class":128,"line":193},[126,1446,1447],{"class":154},"        animation-timeline",[126,1449,151],{"class":140},[126,1451,1406],{"class":154},[126,1453,1454],{"class":240},"(nearest ",[126,1456,1457],{"class":154},"block",[126,1459,416],{"class":240},[126,1461,158],{"class":140},[126,1463,1464],{"class":128,"line":199},[126,1465,854],{"class":140},[126,1467,1468],{"class":128,"line":209},[126,1469,196],{"class":140},[32,1471,1473,1474,718],{"id":1472},"渐进增强supports","渐进增强（",[123,1475,1395],{},[23,1477,1478],{},"在不支持某属性时提供回退，避免整段样式被忽略：",[117,1480,1482],{"className":119,"code":1481,"language":12,"meta":121,"style":121},".card {\n    background: #fff;\n}\n@supports (color: oklch(0% 0 0)) {\n    .card {\n        background: oklch(98% 0.01 250);\n    }\n}\n",[123,1483,1484,1492,1506,1510,1539,1547,1570,1574],{"__ignoreMap":121},[126,1485,1486,1488,1490],{"class":128,"line":129},[126,1487,133],{"class":132},[126,1489,401],{"class":136},[126,1491,141],{"class":140},[126,1493,1494,1497,1499,1501,1504],{"class":128,"line":144},[126,1495,1496],{"class":147},"    background",[126,1498,151],{"class":140},[126,1500,1069],{"class":1068},[126,1502,1503],{"class":154},"fff",[126,1505,158],{"class":140},[126,1507,1508],{"class":128,"line":161},[126,1509,196],{"class":140},[126,1511,1512,1514,1516,1519,1521,1524,1526,1529,1531,1533,1535,1537],{"class":128,"line":193},[126,1513,1395],{"class":742},[126,1515,1398],{"class":140},[126,1517,1518],{"class":147},"color",[126,1520,151],{"class":140},[126,1522,1523],{"class":169}," oklch",[126,1525,173],{"class":140},[126,1527,1528],{"class":176},"0",[126,1530,1159],{"class":186},[126,1532,428],{"class":176},[126,1534,428],{"class":176},[126,1536,687],{"class":140},[126,1538,141],{"class":140},[126,1540,1541,1543,1545],{"class":128,"line":199},[126,1542,753],{"class":132},[126,1544,401],{"class":136},[126,1546,141],{"class":140},[126,1548,1549,1551,1553,1555,1557,1560,1562,1565,1568],{"class":128,"line":209},[126,1550,842],{"class":147},[126,1552,151],{"class":140},[126,1554,1523],{"class":169},[126,1556,173],{"class":140},[126,1558,1559],{"class":176},"98",[126,1561,1159],{"class":186},[126,1563,1564],{"class":176}," 0.01",[126,1566,1567],{"class":176}," 250",[126,1569,190],{"class":140},[126,1571,1572],{"class":128,"line":220},[126,1573,854],{"class":140},[126,1575,1576],{"class":128,"line":232},[126,1577,196],{"class":140},[32,1579,1580],{"id":1580},"使用建议",[614,1582,1583,1591,1598],{},[1584,1585,1345,1586,1590],"li",{},[27,1587,1588],{},[123,1589,1395],{}," 或分层样式做渐进增强，而非依赖未文档化的 hack。",[1584,1592,1593,1594,1597],{},"构建工具（PostCSS、Autoprefixer）可补部分前缀；",[27,1595,1596],{},"IE 已停止支持","，无需再为其单独设计。",[1584,1599,1600,1601,1606],{},"新特性上线前查 ",[60,1602,1605],{"href":1603,"rel":1604},"https:\u002F\u002Fcaniuse.com\u002F",[272],"Can I use"," 与项目最低浏览器版本。",[32,1608,1609],{"id":1609},"总结",[23,1611,1612,1613,1616,1617,1620,1621,1623,1624,1626,1627,1630,1631,1634],{},"现代 CSS 围绕：",[27,1614,1615],{},"更强布局","（Grid\u002FFlex\u002FSubgrid）、",[27,1618,1619],{},"组件化响应","（容器查询、",[123,1622,381],{},"、",[123,1625,792],{},"）、",[27,1628,1629],{},"国际化与可维护性","（逻辑属性、新颜色空间、",[123,1632,1633],{},"clamp","）。",[32,1636,1637],{"id":1637},"参考文献",[23,1639,1640],{},"以下链接在编写时均可正常访问：",[36,1642,1643,1652],{},[39,1644,1645],{},[42,1646,1647,1650],{},[45,1648,1649],{},"资料",[45,1651,923],{},[52,1653,1654,1666,1678,1690,1701,1713,1725,1740,1752,1764,1776,1788,1800],{},[42,1655,1656,1663],{},[57,1657,1658],{},[60,1659,1662],{"href":1660,"rel":1661},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002F:has",[272],"MDN：:has()",[57,1664,1665],{},"关系伪类",[42,1667,1668,1675],{},[57,1669,1670],{},[60,1671,1674],{"href":1672,"rel":1673},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002F@layer",[272],"MDN：@layer",[57,1676,1677],{},"层叠层",[42,1679,1680,1687],{},[57,1681,1682],{},[60,1683,1686],{"href":1684,"rel":1685},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002FCSS_logical_properties_and_values",[272],"MDN：CSS 逻辑属性",[57,1688,1689],{},"逻辑属性与值",[42,1691,1692,1698],{},[57,1693,1694],{},[60,1695,1697],{"href":270,"rel":1696},[272],"MDN：subgrid",[57,1699,1700],{},"子网格",[42,1702,1703,1710],{},[57,1704,1705],{},[60,1706,1709],{"href":1707,"rel":1708},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002Faccent-color",[272],"MDN：accent-color",[57,1711,1712],{},"强调色",[42,1714,1715,1722],{},[57,1716,1717],{},[60,1718,1721],{"href":1719,"rel":1720},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002Fcolor_value\u002Fcolor-mix",[272],"MDN：color-mix()",[57,1723,1724],{},"颜色混合",[42,1726,1727,1737],{},[57,1728,1729],{},[60,1730,1733,1734,1736],{"href":1731,"rel":1732},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002F:is",[272],"MDN：:is() \u002F ",[609,1735],{},"()",[57,1738,1739],{},"选择器列表伪类",[42,1741,1742,1749],{},[57,1743,1744],{},[60,1745,1748],{"href":1746,"rel":1747},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002F@scope",[272],"MDN：@scope",[57,1750,1751],{},"作用域",[42,1753,1754,1761],{},[57,1755,1756],{},[60,1757,1760],{"href":1758,"rel":1759},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002Faspect-ratio",[272],"MDN：aspect-ratio",[57,1762,1763],{},"宽高比",[42,1765,1766,1773],{},[57,1767,1768],{},[60,1769,1772],{"href":1770,"rel":1771},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002F@property",[272],"MDN：@property",[57,1774,1775],{},"注册自定义属性",[42,1777,1778,1785],{},[57,1779,1780],{},[60,1781,1784],{"href":1782,"rel":1783},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FCSS_scroll-driven_animations",[272],"MDN：Scroll-driven animations",[57,1786,1787],{},"滚动驱动动画（英文）",[42,1789,1790,1797],{},[57,1791,1792],{},[60,1793,1796],{"href":1794,"rel":1795},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002F@supports",[272],"MDN：@supports",[57,1798,1799],{},"特性查询",[42,1801,1802,1807],{},[57,1803,1804],{},[60,1805,1605],{"href":1603,"rel":1806},[272],[57,1808,1809],{},"特性浏览器支持查询（作辅助，以 MDN 为准）",[1811,1812,1813],"style",{},"html pre.shiki code .stp6e, html code.shiki .stp6e{--shiki-light:#39ADB5;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sbgvK, html code.shiki .sbgvK{--shiki-light:#E2931D;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sP7_E, html code.shiki .sP7_E{--shiki-light:#39ADB5;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .soE4H, html code.shiki .soE4H{--shiki-light:#8796B0;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s_hVV, html code.shiki .s_hVV{--shiki-light:#90A4AE;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sptTA, html code.shiki .sptTA{--shiki-light:#6182B8;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .srdBf, html code.shiki .srdBf{--shiki-light:#F76D47;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sw1J6, html code.shiki .sw1J6{--shiki-light:#F76D47;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .su5hD, html code.shiki .su5hD{--shiki-light:#90A4AE;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .s9AJx, html code.shiki .s9AJx{--shiki-light:#9C3EDA;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s83vy, html code.shiki .s83vy{--shiki-light:#E2931D;--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sMMDD, html code.shiki .sMMDD{--shiki-light:#90A4AE;--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sVHd0, html code.shiki .sVHd0{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#D73A49;--shiki-default-font-style:inherit;--shiki-dark:#F97583;--shiki-dark-font-style:inherit}html pre.shiki code .sutJx, html code.shiki .sutJx{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#6A737D;--shiki-default-font-style:inherit;--shiki-dark:#6A737D;--shiki-dark-font-style:inherit}html pre.shiki code .s39Yj, html code.shiki .s39Yj{--shiki-light:#39ADB5;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .smGrS, html code.shiki .smGrS{--shiki-light:#39ADB5;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s99_P, html code.shiki .s99_P{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#E36209;--shiki-default-font-style:inherit;--shiki-dark:#FFAB70;--shiki-dark-font-style:inherit}",{"title":121,"searchDepth":144,"depth":144,"links":1815},[1816,1817,1818,1826,1828,1830,1831,1832,1833,1835,1836,1837],{"id":34,"depth":144,"text":34},{"id":276,"depth":144,"text":277},{"id":374,"depth":144,"text":374,"children":1819},[1820,1822,1824],{"id":378,"depth":161,"text":1821},":has()（关系伪类）",{"id":475,"depth":161,"text":1823},":not() 多参数",{"id":532,"depth":161,"text":1825},":is() 与 :where()",{"id":713,"depth":144,"text":1827},"作用域（@scope）",{"id":788,"depth":144,"text":1829},"层叠层（@layer）",{"id":912,"depth":144,"text":912},{"id":1221,"depth":144,"text":1221},{"id":1323,"depth":144,"text":1323},{"id":1472,"depth":144,"text":1834},"渐进增强（@supports）",{"id":1580,"depth":144,"text":1580},{"id":1609,"depth":144,"text":1609},{"id":1637,"depth":144,"text":1637},{"title":8,"description":9},"knowledge\u002Fbooklet\u002Fweb\u002FCss\u002Fnew-css","knowledge\u002Fknowledge\u002Fbooklet\u002Fweb\u002FCss\u002Fnew-css.md","md",{"items":1843},[1844,1848,1852,1856,1860,1863],{"path":1845,"title":1846,"description":1847,"category":10,"score":209},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fless\u002Fless-core","Less 基础与核心语法","Less 是 JavaScript 实现的 CSS 预处理器，在 CSS 语法上扩展变量（@）、嵌套、混合、运算与函数，编译为普通 CSS 后由浏览器加载；本文覆盖安装、CLI、构建工具集成与全部核心语法。",{"path":1849,"title":1850,"description":1851,"category":10,"score":209},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-intro","Sass 简介与安装","Sass（Syntactically Awesome Style Sheets）是 CSS 预处理器，在 CSS 语法上增加变量、嵌套、混合、模块、控制指令等；有 SCSS 与缩进语法两种源码语法，官方实现为 Dart Sass。",{"path":1853,"title":1854,"description":1855,"category":10,"score":209},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-modules","模块与控制流：@use、内置函数、@if\u002F@for\u002F@each","Dart Sass 推荐用 @use\u002F@forward 替代已弃用的 @import；内置 sass:* 模块提供颜色、字符串、列表、Map、数学等函数；@if\u002F@for\u002F@each\u002F@while 用于条件与循环生成样式。",{"path":1857,"title":1858,"description":1859,"category":10,"score":209},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-reuse","复用机制：Mixin 与继承","Mixin（@mixin\u002F@include）支持参数与 @content，适合动态样式；@extend 与 %placeholder 通过合并选择器复用完全相同的静态样式，减少 CSS 体积。",{"path":114,"title":1861,"description":1862,"category":10,"score":209},"语法基础：变量、嵌套与运算","Sass 语法基础：$ 变量与插值、选择器嵌套与 & 父选择器引用、数学\u002F颜色\u002F字符串运算、三种注释语法及与原生 CSS 嵌套的关系。",{"path":984,"title":985,"description":1864,"category":10,"score":209},"color 设置前景（多为文字）色；background-* 设置元素背景（颜色、图像、渐变）。二者共同决定对比度与视觉层次，直接影响 无障碍 阅读体验。排版中的文本颜色用法见 排版与文本。",{"series":1866,"title":12,"items":1867,"index":889,"prev":1926,"next":1927},"booklet\u002Fweb\u002Fcss",[1868,1872,1874,1878,1882,1885,1889,1893,1896,1900,1902,1906,1907,1911,1915,1918,1919,1920,1921,1922],{"path":1869,"title":1870,"date":1871,"pinned":14},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fanimation","变换、过渡与动画","2023-01-09",{"path":984,"title":985,"date":1873,"pinned":14},"2025-05-01",{"path":1875,"title":1876,"date":1877,"pinned":14},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fcss-sass-less","CSS、Sass 与 Less","2019-09-28",{"path":1879,"title":1880,"date":1881,"pinned":14},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fdisplay","display 与常规流","2024-01-30",{"path":62,"title":1883,"date":1884,"pinned":14},"弹性盒子","2020-09-29",{"path":1886,"title":1887,"date":1888,"pinned":14},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Ffont-optimization","字体优化策略","2021-04-23",{"path":1890,"title":1891,"date":1892,"pinned":14},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Ffont-unit","字体单位","2021-10-12",{"path":73,"title":1894,"date":1895,"pinned":14},"网格布局","2020-11-09",{"path":1897,"title":1898,"date":1899,"pinned":14},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Flayout-text","排版与文本","2024-01-25",{"path":1845,"title":1846,"date":1901,"pinned":14},"2026-07-23",{"path":1903,"title":1904,"date":1905,"pinned":14},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fmodel","盒模型","2023-09-04",{"path":7,"title":8,"date":13,"pinned":14},{"path":1908,"title":1909,"date":1910,"pinned":14},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fposition","定位","2022-11-08",{"path":1912,"title":1913,"date":1914,"pinned":14},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fless\u002Fproject","工程化集成与扩展","2024-07-02",{"path":84,"title":1916,"date":1917,"pinned":14},"响应式设计与交互","2022-01-31",{"path":1849,"title":1850,"date":1901,"pinned":14},{"path":1853,"title":1854,"date":1901,"pinned":14},{"path":1857,"title":1858,"date":1901,"pinned":14},{"path":114,"title":1861,"date":1901,"pinned":14},{"path":1923,"title":1924,"date":1925,"pinned":14},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fvisual-effects","视觉效果","2021-11-04",{"path":1903,"title":1904,"date":1905,"pinned":14},{"path":1908,"title":1909,"date":1910,"pinned":14}]