[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"knowledge-\u002Fapi\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fcolor":3,"knowledge-related-\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fcolor":1435,"knowledge-series-\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fcolor":1461},{"source":4,"connector":5,"page":6},"sqlite","better-sqlite3",{"path":7,"title":8,"description":9,"category":10,"tags":11,"date":14,"pinned":15,"draft":15,"body":16,"seo":1431,"stem":1432,"id":1433,"extension":1434},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fcolor","颜色与背景","color 设置前景（多为文字）色；background-* 设置元素背景（颜色、图像、渐变）。二者共同决定对比度与视觉层次，直接影响 无障碍 阅读体验。排版中的文本颜色用法见 排版与文本。","技能小册",[12,13],"css","color","2025-05-01",false,{"type":17,"value":18,"toc":1405},"minimark",[19,22,46,58,62,244,388,408,411,414,576,580,604,611,614,674,695,698,732,775,781,784,864,867,916,923,930,942,1025,1028,1032,1049,1052,1084,1214,1217,1262,1265,1268,1401],[20,21,8],"h1",{"id":8},[23,24,25,28,29,32,33,40,41,45],"p",{},[26,27,13],"code",{}," 设置前景（多为文字）色；",[26,30,31],{},"background-*"," 设置元素背景（颜色、图像、渐变）。二者共同决定对比度与视觉层次，直接影响 ",[34,35,39],"a",{"href":36,"rel":37},"https:\u002F\u002Fwww.w3.org\u002FWAI\u002FWCAG21\u002FUnderstanding\u002Fcontrast-minimum.html",[38],"nofollow","无障碍"," 阅读体验。排版中的文本颜色用法见 ",[34,42,44],{"href":43},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Flayout-text","排版与文本","。",[47,48,50,51,53,54,57],"h2",{"id":49},"颜色color-与-color-类型","颜色（",[26,52,13],{}," 与 ",[26,55,56],{},"\u003Ccolor>"," 类型）",[59,60,61],"h3",{"id":61},"常用表示法",[63,64,65,81],"table",{},[66,67,68],"thead",{},[69,70,71,75,78],"tr",{},[72,73,74],"th",{},"方式",[72,76,77],{},"示例",[72,79,80],{},"说明",[82,83,84,104,123,152,173,191,206,225],"tbody",{},[69,85,86,90,99],{},[87,88,89],"td",{},"关键字",[87,91,92,95,96],{},[26,93,94],{},"red",", ",[26,97,98],{},"transparent",[87,100,101,103],{},[26,102,98],{}," 全透明",[69,105,106,109,120],{},[87,107,108],{},"十六进制",[87,110,111,95,114,95,117],{},[26,112,113],{},"#fff",[26,115,116],{},"#ff0000",[26,118,119],{},"#ff000080",[87,121,122],{},"3\u002F6\u002F8 位（8 位含 alpha）",[69,124,125,134,142],{},[87,126,127,130,131],{},[26,128,129],{},"rgb()"," \u002F ",[26,132,133],{},"rgba()",[87,135,136,95,139],{},[26,137,138],{},"rgb(255 0 0)",[26,140,141],{},"rgba(0,0,0,0.5)",[87,143,144,145,148,149],{},"现代推荐空格语法 + ",[26,146,147],{},"\u002F"," alpha：",[26,150,151],{},"rgb(0 0 0 \u002F 50%)",[69,153,154,162,167],{},[87,155,156,130,159],{},[26,157,158],{},"hsl()",[26,160,161],{},"hsla()",[87,163,164],{},[26,165,166],{},"hsl(120 100% 50%)",[87,168,169,170,172],{},"调亮度直观；支持 ",[26,171,147],{}," alpha",[69,174,175,183,188],{},[87,176,177,130,180],{},[26,178,179],{},"oklch()",[26,181,182],{},"oklab()",[87,184,185],{},[26,186,187],{},"oklch(60% 0.15 250)",[87,189,190],{},"感知均匀，新设计常用",[69,192,193,198,203],{},[87,194,195],{},[26,196,197],{},"color-mix()",[87,199,200],{},[26,201,202],{},"color-mix(in srgb, red 50%, blue)",[87,204,205],{},"混色",[69,207,208,213,218],{},[87,209,210],{},[26,211,212],{},"light-dark()",[87,214,215],{},[26,216,217],{},"light-dark(#111, #eee)",[87,219,220,221,224],{},"在 ",[26,222,223],{},"color-scheme: light dark"," 下按浅色\u002F深色方案取值",[69,226,227,232,235],{},[87,228,229],{},[26,230,231],{},"currentColor",[87,233,234],{},"—",[87,236,237,238,240,241],{},"取当前元素 ",[26,239,13],{}," 计算值，常用于 ",[26,242,243],{},"border-color",[245,246,250],"pre",{"className":247,"code":248,"language":12,"meta":249,"style":249},"language-css shiki shiki-themes material-theme-lighter github-light github-dark","h1 {\n    color: #333;\n}\np {\n    color: rgb(0 0 0 \u002F 0.8);\n}\n.box {\n    color: blue;\n    border: 2px solid currentColor;\n}\n","",[26,251,252,264,285,291,298,330,335,348,360,383],{"__ignoreMap":249},[253,254,257,260],"span",{"class":255,"line":256},"line",1,[253,258,20],{"class":259},"s83vy",[253,261,263],{"class":262},"sP7_E"," {\n",[253,265,267,271,274,278,282],{"class":255,"line":266},2,[253,268,270],{"class":269},"soE4H","    color",[253,272,273],{"class":262},":",[253,275,277],{"class":276},"s39Yj"," #",[253,279,281],{"class":280},"s_hVV","333",[253,283,284],{"class":262},";\n",[253,286,288],{"class":255,"line":287},3,[253,289,290],{"class":262},"}\n",[253,292,294,296],{"class":255,"line":293},4,[253,295,23],{"class":259},[253,297,263],{"class":262},[253,299,301,303,305,309,312,316,319,321,324,327],{"class":255,"line":300},5,[253,302,270],{"class":269},[253,304,273],{"class":262},[253,306,308],{"class":307},"sptTA"," rgb",[253,310,311],{"class":262},"(",[253,313,315],{"class":314},"srdBf","0",[253,317,318],{"class":314}," 0",[253,320,318],{"class":314},[253,322,130],{"class":323},"su5hD",[253,325,326],{"class":314},"0.8",[253,328,329],{"class":262},");\n",[253,331,333],{"class":255,"line":332},6,[253,334,290],{"class":262},[253,336,338,342,346],{"class":255,"line":337},7,[253,339,341],{"class":340},"stp6e",".",[253,343,345],{"class":344},"sbgvK","box",[253,347,263],{"class":262},[253,349,351,353,355,358],{"class":255,"line":350},8,[253,352,270],{"class":269},[253,354,273],{"class":262},[253,356,357],{"class":280}," blue",[253,359,284],{"class":262},[253,361,363,366,368,371,375,378,381],{"class":255,"line":362},9,[253,364,365],{"class":269},"    border",[253,367,273],{"class":262},[253,369,370],{"class":314}," 2",[253,372,374],{"class":373},"sw1J6","px",[253,376,377],{"class":280}," solid",[253,379,380],{"class":280}," currentColor",[253,382,284],{"class":262},[253,384,386],{"class":255,"line":385},10,[253,387,290],{"class":262},[389,390,391],"blockquote",{},[23,392,393,130,395,397,398,130,400,402,403,407],{},[26,394,133],{},[26,396,161],{}," 仍广泛支持；新代码可优先 ",[26,399,129],{},[26,401,158],{}," 的 ",[404,405,406],"strong",{},"斜杠 alpha"," 写法。",[47,409,410],{"id":410},"背景属性",[59,412,413],{"id":413},"分项属性",[63,415,416,426],{},[66,417,418],{},[69,419,420,423],{},[72,421,422],{},"属性",[72,424,425],{},"作用",[82,427,428,440,461,482,501,517,534,548],{},[69,429,430,435],{},[87,431,432],{},[26,433,434],{},"background-color",[87,436,437,438],{},"背景色，默认 ",[26,439,98],{},[69,441,442,447],{},[87,443,444],{},[26,445,446],{},"background-image",[87,448,449,452,453,456,457,460],{},[26,450,451],{},"url()","、",[404,454,455],{},"渐变","（",[26,458,459],{},"linear-gradient"," 等）",[69,462,463,468],{},[87,464,465],{},[26,466,467],{},"background-repeat",[87,469,470,130,473,130,476,130,479],{},[26,471,472],{},"repeat",[26,474,475],{},"no-repeat",[26,477,478],{},"repeat-x",[26,480,481],{},"repeat-y",[69,483,484,489],{},[87,485,486],{},[26,487,488],{},"background-position",[87,490,491,492,452,495,452,498],{},"如 ",[26,493,494],{},"center",[26,496,497],{},"top left",[26,499,500],{},"50% 50%",[69,502,503,508],{},[87,504,505],{},[26,506,507],{},"background-size",[87,509,510,130,513,516],{},[26,511,512],{},"cover",[26,514,515],{},"contain"," \u002F 具体尺寸",[69,518,519,524],{},[87,520,521],{},[26,522,523],{},"background-attachment",[87,525,526,529,530,533],{},[26,527,528],{},"scroll","（默认）\u002F ",[26,531,532],{},"fixed","（相对视口；移动端可能有性能问题）",[69,535,536,541],{},[87,537,538],{},[26,539,540],{},"background-origin",[87,542,543,544,547],{},"定位参照盒：",[26,545,546],{},"padding-box","（默认）等",[69,549,550,555],{},[87,551,552],{},[26,553,554],{},"background-clip",[87,556,557,558,561,562,452,564,567,568,571,572,575],{},"背景绘制到何处；",[26,559,560],{},"border-box","（默认）、",[26,563,546],{},[26,565,566],{},"content-box","；",[26,569,570],{},"text"," 可做文字裁剪（常需 ",[26,573,574],{},"-webkit-background-clip: text","）",[59,577,578],{"id":507},[26,579,507],{},[581,582,583,591,598],"ul",{},[584,585,586,590],"li",{},[404,587,588],{},[26,589,512],{},"：保持比例铺满，可能裁剪。",[584,592,593,597],{},[404,594,595],{},[26,596,515],{},"：完整显示图片，可能留白。",[584,599,600,601,45],{},"双值：如 ",[26,602,603],{},"100% auto",[59,605,607,608],{"id":606},"简写-background","简写 ",[26,609,610],{},"background",[23,612,613],{},"多层背景用逗号分隔；单层常见写法：",[245,615,617],{"className":247,"code":616,"language":12,"meta":249,"style":249},".hero {\n    background: #f0f0f0 url(\"bg.jpg\") no-repeat center \u002F cover;\n}\n",[26,618,619,628,670],{"__ignoreMap":249},[253,620,621,623,626],{"class":255,"line":256},[253,622,341],{"class":340},[253,624,625],{"class":344},"hero",[253,627,263],{"class":262},[253,629,630,633,635,637,640,643,645,649,653,655,658,661,664,666,668],{"class":255,"line":266},[253,631,632],{"class":269},"    background",[253,634,273],{"class":262},[253,636,277],{"class":276},[253,638,639],{"class":280},"f0f0f0",[253,641,642],{"class":307}," url",[253,644,311],{"class":262},[253,646,648],{"class":647},"sjJ54","\"",[253,650,652],{"class":651},"s_sjI","bg.jpg",[253,654,648],{"class":647},[253,656,657],{"class":262},")",[253,659,660],{"class":280}," no-repeat",[253,662,663],{"class":280}," center",[253,665,130],{"class":323},[253,667,512],{"class":280},[253,669,284],{"class":262},[253,671,672],{"class":255,"line":287},[253,673,290],{"class":262},[23,675,676,53,679,682,683,685,686,45,689,694],{},[26,677,678],{},"position",[26,680,681],{},"size"," 用 ",[26,684,147],{}," 连接，如 ",[26,687,688],{},"center \u002F cover",[404,690,691,693],{},[26,692,434],{}," 只能写在最后一层","（规范要求）。",[47,696,697],{"id":697},"透明度",[63,699,700,709],{},[66,701,702],{},[69,703,704,706],{},[72,705,74],{},[72,707,708],{},"作用范围",[82,710,711,724],{},[69,712,713,718],{},[87,714,715],{},[26,716,717],{},"opacity: 0.5",[87,719,720,723],{},[404,721,722],{},"整个元素","（含子元素）变透明，且会创建层叠上下文",[69,725,726,729],{},[87,727,728],{},"带 alpha 的颜色",[87,730,731],{},"仅该层背景\u002F文字色透明，子元素不受影响",[245,733,735],{"className":247,"code":734,"language":12,"meta":249,"style":249},".panel {\n    background-color: rgb(255 0 0 \u002F 0.5);\n}\n",[26,736,737,746,771],{"__ignoreMap":249},[253,738,739,741,744],{"class":255,"line":256},[253,740,341],{"class":340},[253,742,743],{"class":344},"panel",[253,745,263],{"class":262},[253,747,748,751,753,755,757,760,762,764,766,769],{"class":255,"line":266},[253,749,750],{"class":269},"    background-color",[253,752,273],{"class":262},[253,754,308],{"class":307},[253,756,311],{"class":262},[253,758,759],{"class":314},"255",[253,761,318],{"class":314},[253,763,318],{"class":314},[253,765,130],{"class":323},[253,767,768],{"class":314},"0.5",[253,770,329],{"class":262},[253,772,773],{"class":255,"line":287},[253,774,290],{"class":262},[47,776,778,779,575],{"id":777},"渐变属于-background-image","渐变（属于 ",[26,780,446],{},[59,782,783],{"id":783},"线性渐变",[245,785,787],{"className":247,"code":786,"language":12,"meta":249,"style":249},".gradient {\n    background: linear-gradient(to right, red, blue);\n    background: linear-gradient(45deg, red, orange, yellow);\n}\n",[26,788,789,798,828,860],{"__ignoreMap":249},[253,790,791,793,796],{"class":255,"line":256},[253,792,341],{"class":340},[253,794,795],{"class":344},"gradient",[253,797,263],{"class":262},[253,799,800,802,804,807,809,813,816,819,822,824,826],{"class":255,"line":266},[253,801,632],{"class":269},[253,803,273],{"class":262},[253,805,806],{"class":307}," linear-gradient",[253,808,311],{"class":262},[253,810,812],{"class":811},"smGrS","to",[253,814,815],{"class":280}," right",[253,817,818],{"class":262},",",[253,820,821],{"class":280}," red",[253,823,818],{"class":262},[253,825,357],{"class":280},[253,827,329],{"class":262},[253,829,830,832,834,836,838,841,844,846,848,850,853,855,858],{"class":255,"line":287},[253,831,632],{"class":269},[253,833,273],{"class":262},[253,835,806],{"class":307},[253,837,311],{"class":262},[253,839,840],{"class":314},"45",[253,842,843],{"class":373},"deg",[253,845,818],{"class":262},[253,847,821],{"class":280},[253,849,818],{"class":262},[253,851,852],{"class":280}," orange",[253,854,818],{"class":262},[253,856,857],{"class":280}," yellow",[253,859,329],{"class":262},[253,861,862],{"class":255,"line":293},[253,863,290],{"class":262},[59,865,866],{"id":866},"径向渐变",[245,868,870],{"className":247,"code":869,"language":12,"meta":249,"style":249},".radial {\n    background: radial-gradient(circle at center, white, black);\n}\n",[26,871,872,881,912],{"__ignoreMap":249},[253,873,874,876,879],{"class":255,"line":256},[253,875,341],{"class":340},[253,877,878],{"class":344},"radial",[253,880,263],{"class":262},[253,882,883,885,887,890,892,895,898,900,902,905,907,910],{"class":255,"line":266},[253,884,632],{"class":269},[253,886,273],{"class":262},[253,888,889],{"class":307}," radial-gradient",[253,891,311],{"class":262},[253,893,894],{"class":280},"circle",[253,896,897],{"class":811}," at",[253,899,663],{"class":280},[253,901,818],{"class":262},[253,903,904],{"class":280}," white",[253,906,818],{"class":262},[253,908,909],{"class":280}," black",[253,911,329],{"class":262},[253,913,914],{"class":255,"line":287},[253,915,290],{"class":262},[23,917,918,919,922],{},"可用 ",[26,920,921],{},"conic-gradient"," 做锥形渐变。渐变由浏览器实时绘制，通常比大图更省带宽。",[47,924,926,927,575],{"id":925},"配色方案color-scheme","配色方案（",[26,928,929],{},"color-scheme",[23,931,932,933,935,936,452,938,941],{},"在根或容器上声明 ",[26,934,223],{},"，告知用户代理页面支持浅色与深色；表单控件、滚动条等会使用对应默认样式。与 ",[26,937,212],{},[26,939,940],{},"prefers-color-scheme"," 媒体查询可组合实现主题切换。",[245,943,945],{"className":247,"code":944,"language":12,"meta":249,"style":249},":root {\n    color-scheme: light dark;\n    background: light-dark(#fff, #121212);\n    color: light-dark(#222, #f0f0f0);\n}\n",[26,946,947,957,972,998,1021],{"__ignoreMap":249},[253,948,949,951,955],{"class":255,"line":256},[253,950,273],{"class":340},[253,952,954],{"class":953},"s9AJx","root",[253,956,263],{"class":262},[253,958,959,962,964,967,970],{"class":255,"line":266},[253,960,961],{"class":269},"    color-scheme",[253,963,273],{"class":262},[253,965,966],{"class":280}," light",[253,968,969],{"class":280}," dark",[253,971,284],{"class":262},[253,973,974,976,978,981,984,987,989,991,994,996],{"class":255,"line":287},[253,975,632],{"class":269},[253,977,273],{"class":262},[253,979,980],{"class":323}," light-dark(",[253,982,983],{"class":276},"#",[253,985,986],{"class":280},"fff",[253,988,818],{"class":262},[253,990,277],{"class":276},[253,992,993],{"class":280},"121212",[253,995,657],{"class":323},[253,997,284],{"class":262},[253,999,1000,1002,1004,1006,1008,1011,1013,1015,1017,1019],{"class":255,"line":293},[253,1001,270],{"class":269},[253,1003,273],{"class":262},[253,1005,980],{"class":323},[253,1007,983],{"class":276},[253,1009,1010],{"class":280},"222",[253,1012,818],{"class":262},[253,1014,277],{"class":276},[253,1016,639],{"class":280},[253,1018,657],{"class":323},[253,1020,284],{"class":262},[253,1022,1023],{"class":255,"line":300},[253,1024,290],{"class":262},[47,1026,1027],{"id":1027},"可访问性与性能",[59,1029,1031],{"id":1030},"对比度wcag-2","对比度（WCAG 2）",[581,1033,1034,1040,1046],{},[584,1035,1036,1037,45],{},"正文文字与背景：对比度建议 ",[404,1038,1039],{},"≥ 4.5:1",[584,1041,1042,1043,45],{},"大号字（约 ≥ 18px 常规或 ≥ 14px 粗体）：",[404,1044,1045],{},"≥ 3:1",[584,1047,1048],{},"不要仅靠颜色传达状态（需配合图标、文案）。",[59,1050,1051],{"id":1051},"实践建议",[581,1053,1054,1060,1067,1078],{},[584,1055,1056,1057,1059],{},"纯色背景用 ",[26,1058,434],{},"，勿用 1×1 图片。",[584,1061,1062,1063,1066],{},"有背景图时仍设 ",[404,1064,1065],{},"fallback 背景色","，图片失败时文字可读。",[584,1068,1069,1070,1073,1074,1077],{},"响应式图：可用 ",[26,1071,1072],{},"image-set()"," 按分辨率切换，或与 ",[26,1075,1076],{},"\u003Cpicture>"," 配合。",[584,1079,1080,1081,1083],{},"移动端大背景 ",[26,1082,532],{}," 慎用，易卡顿。",[245,1085,1087],{"className":247,"code":1086,"language":12,"meta":249,"style":249},".card {\n    color: #333;\n    background-color: #f4f4f4;\n    background-image: url(\"pattern.png\");\n    background-position: center top;\n    background-size: contain;\n    background-repeat: no-repeat;\n    border: 1px solid rgb(0 0 0 \u002F 0.1);\n}\n",[26,1088,1089,1098,1110,1123,1143,1157,1169,1180,1210],{"__ignoreMap":249},[253,1090,1091,1093,1096],{"class":255,"line":256},[253,1092,341],{"class":340},[253,1094,1095],{"class":344},"card",[253,1097,263],{"class":262},[253,1099,1100,1102,1104,1106,1108],{"class":255,"line":266},[253,1101,270],{"class":269},[253,1103,273],{"class":262},[253,1105,277],{"class":276},[253,1107,281],{"class":280},[253,1109,284],{"class":262},[253,1111,1112,1114,1116,1118,1121],{"class":255,"line":287},[253,1113,750],{"class":269},[253,1115,273],{"class":262},[253,1117,277],{"class":276},[253,1119,1120],{"class":280},"f4f4f4",[253,1122,284],{"class":262},[253,1124,1125,1128,1130,1132,1134,1136,1139,1141],{"class":255,"line":293},[253,1126,1127],{"class":269},"    background-image",[253,1129,273],{"class":262},[253,1131,642],{"class":307},[253,1133,311],{"class":262},[253,1135,648],{"class":647},[253,1137,1138],{"class":651},"pattern.png",[253,1140,648],{"class":647},[253,1142,329],{"class":262},[253,1144,1145,1148,1150,1152,1155],{"class":255,"line":300},[253,1146,1147],{"class":269},"    background-position",[253,1149,273],{"class":262},[253,1151,663],{"class":280},[253,1153,1154],{"class":280}," top",[253,1156,284],{"class":262},[253,1158,1159,1162,1164,1167],{"class":255,"line":332},[253,1160,1161],{"class":269},"    background-size",[253,1163,273],{"class":262},[253,1165,1166],{"class":280}," contain",[253,1168,284],{"class":262},[253,1170,1171,1174,1176,1178],{"class":255,"line":337},[253,1172,1173],{"class":269},"    background-repeat",[253,1175,273],{"class":262},[253,1177,660],{"class":280},[253,1179,284],{"class":262},[253,1181,1182,1184,1186,1189,1191,1193,1195,1197,1199,1201,1203,1205,1208],{"class":255,"line":350},[253,1183,365],{"class":269},[253,1185,273],{"class":262},[253,1187,1188],{"class":314}," 1",[253,1190,374],{"class":373},[253,1192,377],{"class":280},[253,1194,308],{"class":307},[253,1196,311],{"class":262},[253,1198,315],{"class":314},[253,1200,318],{"class":314},[253,1202,318],{"class":314},[253,1204,130],{"class":323},[253,1206,1207],{"class":314},"0.1",[253,1209,329],{"class":262},[253,1211,1212],{"class":255,"line":362},[253,1213,290],{"class":262},[47,1215,1216],{"id":1216},"总结",[581,1218,1219,1236,1253,1259],{},[584,1220,1221,1222,147,1224,1226,1227,1229,1230,452,1233,45],{},"颜色：掌握 hex、",[26,1223,129],{},[26,1225,158],{}," 与 alpha、",[26,1228,231],{},"；新特性了解 ",[26,1231,1232],{},"oklch",[26,1234,1235],{},"color-mix",[584,1237,1238,1239,147,1241,1243,1244,1246,1247,147,1250,45],{},"背景：分清 ",[26,1240,512],{},[26,1242,515],{},"、简写中 ",[26,1245,147],{}," 的含义、",[26,1248,1249],{},"clip",[26,1251,1252],{},"origin",[584,1254,1255,1256,45],{},"透明：优先带 alpha 的颜色，慎用整元素 ",[26,1257,1258],{},"opacity",[584,1260,1261],{},"无障碍：保证对比度，背景图加 fallback 色。",[47,1263,1264],{"id":1264},"参考文献",[23,1266,1267],{},"以下链接在编写时均可正常访问：",[63,1269,1270,1279],{},[66,1271,1272],{},[69,1273,1274,1277],{},[72,1275,1276],{},"资料",[72,1278,80],{},[82,1280,1281,1295,1307,1319,1330,1342,1354,1366,1377,1389],{},[69,1282,1283,1292],{},[87,1284,1285],{},[34,1286,1289,1290],{"href":1287,"rel":1288},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002Fcolor_value",[38],"MDN：",[26,1291,56],{},[87,1293,1294],{},"颜色语法与 oklch 等",[69,1296,1297,1304],{},[87,1298,1299],{},[34,1300,1303],{"href":1301,"rel":1302},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002Fcolor",[38],"MDN：color",[87,1305,1306],{},"前景色属性",[69,1308,1309,1316],{},[87,1310,1311],{},[34,1312,1315],{"href":1313,"rel":1314},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002Fbackground",[38],"MDN：background",[87,1317,1318],{},"背景简写",[69,1320,1321,1328],{},[87,1322,1323],{},[34,1324,1327],{"href":1325,"rel":1326},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002Fgradient\u002Flinear-gradient",[38],"MDN：linear-gradient()",[87,1329,783],{},[69,1331,1332,1339],{},[87,1333,1334],{},[34,1335,1338],{"href":1336,"rel":1337},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002Fopacity",[38],"MDN：opacity",[87,1340,1341],{},"整元素透明度",[69,1343,1344,1351],{},[87,1345,1346],{},[34,1347,1350],{"href":1348,"rel":1349},"https:\u002F\u002Fwww.w3.org\u002FTR\u002Fcss-color-4\u002F",[38],"W3C：CSS Color Module Level 4",[87,1352,1353],{},"颜色规范（英文）",[69,1355,1356,1363],{},[87,1357,1358],{},[34,1359,1362],{"href":1360,"rel":1361},"https:\u002F\u002Fwww.w3.org\u002FTR\u002Fcss-backgrounds-3\u002F",[38],"W3C：CSS Backgrounds and Borders Level 3",[87,1364,1365],{},"背景规范（英文）",[69,1367,1368,1374],{},[87,1369,1370],{},[34,1371,1373],{"href":36,"rel":1372},[38],"WCAG 2.1：Contrast (Minimum)",[87,1375,1376],{},"对比度要求",[69,1378,1379,1386],{},[87,1380,1381],{},[34,1382,1385],{"href":1383,"rel":1384},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002Fcolor-scheme",[38],"MDN：color-scheme",[87,1387,1388],{},"浅色\u002F深色方案",[69,1390,1391,1398],{},[87,1392,1393],{},[34,1394,1397],{"href":1395,"rel":1396},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Fcolor_value\u002Flight-dark",[38],"MDN：light-dark()",[87,1399,1400],{},"双主题颜色函数（英文）",[1402,1403,1404],"style",{},"html pre.shiki code .s83vy, html code.shiki .s83vy{--shiki-light:#E2931D;--shiki-default:#22863A;--shiki-dark:#85E89D}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 .s39Yj, html code.shiki .s39Yj{--shiki-light:#39ADB5;--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 .su5hD, html code.shiki .su5hD{--shiki-light:#90A4AE;--shiki-default:#24292E;--shiki-dark:#E1E4E8}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 .sw1J6, html code.shiki .sw1J6{--shiki-light:#F76D47;--shiki-default:#D73A49;--shiki-dark:#F97583}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 .sjJ54, html code.shiki .sjJ54{--shiki-light:#39ADB5;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s_sjI, html code.shiki .s_sjI{--shiki-light:#91B859;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .smGrS, html code.shiki .smGrS{--shiki-light:#39ADB5;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s9AJx, html code.shiki .s9AJx{--shiki-light:#9C3EDA;--shiki-default:#6F42C1;--shiki-dark:#B392F0}",{"title":249,"searchDepth":266,"depth":266,"links":1406},[1407,1411,1417,1418,1423,1425,1429,1430],{"id":49,"depth":266,"text":1408,"children":1409},"颜色（color 与 \u003Ccolor> 类型）",[1410],{"id":61,"depth":287,"text":61},{"id":410,"depth":266,"text":410,"children":1412},[1413,1414,1415],{"id":413,"depth":287,"text":413},{"id":507,"depth":287,"text":507},{"id":606,"depth":287,"text":1416},"简写 background",{"id":697,"depth":266,"text":697},{"id":777,"depth":266,"text":1419,"children":1420},"渐变（属于 background-image）",[1421,1422],{"id":783,"depth":287,"text":783},{"id":866,"depth":287,"text":866},{"id":925,"depth":266,"text":1424},"配色方案（color-scheme）",{"id":1027,"depth":266,"text":1027,"children":1426},[1427,1428],{"id":1030,"depth":287,"text":1031},{"id":1051,"depth":287,"text":1051},{"id":1216,"depth":266,"text":1216},{"id":1264,"depth":266,"text":1264},{"title":8,"description":9},"knowledge\u002Fbooklet\u002Fweb\u002FCss\u002Fcolor","knowledge\u002Fknowledge\u002Fbooklet\u002Fweb\u002FCss\u002Fcolor.md","md",{"items":1436},[1437,1441,1445,1449,1453,1457],{"path":1438,"title":1439,"description":1440,"category":10,"score":332},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fless\u002Fless-core","Less 基础与核心语法","Less 是 JavaScript 实现的 CSS 预处理器，在 CSS 语法上扩展变量（@）、嵌套、混合、运算与函数，编译为普通 CSS 后由浏览器加载；本文覆盖安装、CLI、构建工具集成与全部核心语法。",{"path":1442,"title":1443,"description":1444,"category":10,"score":332},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-intro","Sass 简介与安装","Sass（Syntactically Awesome Style Sheets）是 CSS 预处理器，在 CSS 语法上增加变量、嵌套、混合、模块、控制指令等；有 SCSS 与缩进语法两种源码语法，官方实现为 Dart Sass。",{"path":1446,"title":1447,"description":1448,"category":10,"score":332},"\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":1450,"title":1451,"description":1452,"category":10,"score":332},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-reuse","复用机制：Mixin 与继承","Mixin（@mixin\u002F@include）支持参数与 @content，适合动态样式；@extend 与 %placeholder 通过合并选择器复用完全相同的静态样式，减少 CSS 体积。",{"path":1454,"title":1455,"description":1456,"category":10,"score":332},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-syntax","语法基础：变量、嵌套与运算","Sass 语法基础：$ 变量与插值、选择器嵌套与 & 父选择器引用、数学\u002F颜色\u002F字符串运算、三种注释语法及与原生 CSS 嵌套的关系。",{"path":1458,"title":1459,"description":1460,"category":10,"score":332},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fless\u002Fproject","工程化集成与扩展","Less 可集成到 Vite、Webpack、Vue CLI 等工具链，实现编译、全局变量注入与路径处理。",{"series":1462,"title":12,"items":1463,"index":256,"prev":1523,"next":1524},"booklet\u002Fweb\u002Fcss",[1464,1468,1469,1473,1477,1481,1485,1489,1493,1495,1497,1501,1505,1509,1511,1515,1516,1517,1518,1519],{"path":1465,"title":1466,"date":1467,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fanimation","变换、过渡与动画","2023-01-09",{"path":7,"title":8,"date":14,"pinned":15},{"path":1470,"title":1471,"date":1472,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fcss-sass-less","CSS、Sass 与 Less","2019-09-28",{"path":1474,"title":1475,"date":1476,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fdisplay","display 与常规流","2024-01-30",{"path":1478,"title":1479,"date":1480,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fflex","弹性盒子","2020-09-29",{"path":1482,"title":1483,"date":1484,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Ffont-optimization","字体优化策略","2021-04-23",{"path":1486,"title":1487,"date":1488,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Ffont-unit","字体单位","2021-10-12",{"path":1490,"title":1491,"date":1492,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fgrid","网格布局","2020-11-09",{"path":43,"title":44,"date":1494,"pinned":15},"2024-01-25",{"path":1438,"title":1439,"date":1496,"pinned":15},"2026-07-23",{"path":1498,"title":1499,"date":1500,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fmodel","盒模型","2023-09-04",{"path":1502,"title":1503,"date":1504,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fnew-css","现代 CSS 特性概览","2021-11-09",{"path":1506,"title":1507,"date":1508,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fposition","定位","2022-11-08",{"path":1458,"title":1459,"date":1510,"pinned":15},"2024-07-02",{"path":1512,"title":1513,"date":1514,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fresponsive","响应式设计与交互","2022-01-31",{"path":1442,"title":1443,"date":1496,"pinned":15},{"path":1446,"title":1447,"date":1496,"pinned":15},{"path":1450,"title":1451,"date":1496,"pinned":15},{"path":1454,"title":1455,"date":1496,"pinned":15},{"path":1520,"title":1521,"date":1522,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fvisual-effects","视觉效果","2021-11-04",{"path":1465,"title":1466,"date":1467,"pinned":15},{"path":1470,"title":1471,"date":1472,"pinned":15}]