[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"knowledge-\u002Fapi\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fvisual-effects":3,"knowledge-related-\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fvisual-effects":1192,"knowledge-series-\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fvisual-effects":1218},{"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":1188,"stem":1189,"id":1190,"extension":1191},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fvisual-effects","视觉效果","视觉效果用于强化层次、引导注意力与交互反馈，常与 变换与动画 配合。需注意：过度滤镜、混合与动效会影响性能与无障碍（对比度、焦点可见性、前庭敏感用户）。","技能小册",[12,13],"css","effects","2021-11-04",false,{"type":17,"value":18,"toc":1170},"minimark",[19,22,37,41,62,214,277,338,345,352,465,500,515,521,528,602,608,611,653,775,778,783,796,868,877,895,902,989,992,995,1034,1037,1062,1065,1068,1166],[20,21,8],"h1",{"id":8},[23,24,25,26,31,32,36],"p",{},"视觉效果用于强化层次、引导注意力与交互反馈，常与 ",[27,28,30],"a",{"href":29},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fanimation","变换与动画"," 配合。需注意：",[33,34,35],"strong",{},"过度滤镜、混合与动效","会影响性能与无障碍（对比度、焦点可见性、前庭敏感用户）。",[38,39,40],"h2",{"id":40},"边框与轮廓",[23,42,43,44,48,49,52,53,57,58,61],{},"边框属于 ",[27,45,47],{"href":46},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fmodel","盒模型"," 的 ",[33,50,51],{},"border"," 区域，参与布局尺寸；",[54,55,56],"code",{},"outline"," 画在 border 外侧，",[33,59,60],{},"不占布局空间","。",[63,64,68],"pre",{"className":65,"code":66,"language":12,"meta":67,"style":67},"language-css shiki shiki-themes material-theme-lighter github-light github-dark",".box {\n    border: 2px solid #3498db;\n    border-radius: 8px;\n    border-top: 4px dashed #e74c3c;\n    \u002F* border-image 需配合 slice；渐变边框常用伪元素或 mask 替代 *\u002F\n    border-image: linear-gradient(to right, #3498db, #2ecc71) 1;\n}\n","",[54,69,70,87,119,134,157,164,208],{"__ignoreMap":67},[71,72,75,79,83],"span",{"class":73,"line":74},"line",1,[71,76,78],{"class":77},"stp6e",".",[71,80,82],{"class":81},"sbgvK","box",[71,84,86],{"class":85},"sP7_E"," {\n",[71,88,90,94,97,101,105,109,113,116],{"class":73,"line":89},2,[71,91,93],{"class":92},"soE4H","    border",[71,95,96],{"class":85},":",[71,98,100],{"class":99},"srdBf"," 2",[71,102,104],{"class":103},"sw1J6","px",[71,106,108],{"class":107},"s_hVV"," solid",[71,110,112],{"class":111},"s39Yj"," #",[71,114,115],{"class":107},"3498db",[71,117,118],{"class":85},";\n",[71,120,122,125,127,130,132],{"class":73,"line":121},3,[71,123,124],{"class":92},"    border-radius",[71,126,96],{"class":85},[71,128,129],{"class":99}," 8",[71,131,104],{"class":103},[71,133,118],{"class":85},[71,135,137,140,142,145,147,150,152,155],{"class":73,"line":136},4,[71,138,139],{"class":92},"    border-top",[71,141,96],{"class":85},[71,143,144],{"class":99}," 4",[71,146,104],{"class":103},[71,148,149],{"class":107}," dashed",[71,151,112],{"class":111},[71,153,154],{"class":107},"e74c3c",[71,156,118],{"class":85},[71,158,160],{"class":73,"line":159},5,[71,161,163],{"class":162},"sutJx","    \u002F* border-image 需配合 slice；渐变边框常用伪元素或 mask 替代 *\u002F\n",[71,165,167,170,172,176,179,183,186,189,191,193,195,197,200,203,206],{"class":73,"line":166},6,[71,168,169],{"class":92},"    border-image",[71,171,96],{"class":85},[71,173,175],{"class":174},"sptTA"," linear-gradient",[71,177,178],{"class":85},"(",[71,180,182],{"class":181},"smGrS","to",[71,184,185],{"class":107}," right",[71,187,188],{"class":85},",",[71,190,112],{"class":111},[71,192,115],{"class":107},[71,194,188],{"class":85},[71,196,112],{"class":111},[71,198,199],{"class":107},"2ecc71",[71,201,202],{"class":85},")",[71,204,205],{"class":99}," 1",[71,207,118],{"class":85},[71,209,211],{"class":73,"line":210},7,[71,212,213],{"class":85},"}\n",[63,215,217],{"className":65,"code":216,"language":12,"meta":67,"style":67},"\u002F* 焦点样式：勿随意 outline: none *\u002F\n.control:focus-visible {\n    outline: 3px solid #f39c12;\n    outline-offset: 4px;\n}\n",[54,218,219,224,239,260,273],{"__ignoreMap":67},[71,220,221],{"class":73,"line":74},[71,222,223],{"class":162},"\u002F* 焦点样式：勿随意 outline: none *\u002F\n",[71,225,226,228,231,233,237],{"class":73,"line":89},[71,227,78],{"class":77},[71,229,230],{"class":81},"control",[71,232,96],{"class":77},[71,234,236],{"class":235},"s9AJx","focus-visible",[71,238,86],{"class":85},[71,240,241,244,246,249,251,253,255,258],{"class":73,"line":121},[71,242,243],{"class":92},"    outline",[71,245,96],{"class":85},[71,247,248],{"class":99}," 3",[71,250,104],{"class":103},[71,252,108],{"class":107},[71,254,112],{"class":111},[71,256,257],{"class":107},"f39c12",[71,259,118],{"class":85},[71,261,262,265,267,269,271],{"class":73,"line":136},[71,263,264],{"class":92},"    outline-offset",[71,266,96],{"class":85},[71,268,144],{"class":99},[71,270,104],{"class":103},[71,272,118],{"class":85},[71,274,275],{"class":73,"line":159},[71,276,213],{"class":85},[278,279,280,294],"table",{},[281,282,283],"thead",{},[284,285,286,290,292],"tr",{},[287,288,289],"th",{},"对比",[287,291,51],{},[287,293,56],{},[295,296,297,309,320],"tbody",{},[284,298,299,303,306],{},[300,301,302],"td",{},"占布局空间",[300,304,305],{},"是",[300,307,308],{},"否",[284,310,311,314,317],{},[300,312,313],{},"分边设置",[300,315,316],{},"可（四边）",[300,318,319],{},"通常整体一条线",[284,321,322,325,328],{},[300,323,324],{},"典型用途",[300,326,327],{},"卡片、输入框边界",[300,329,330,333,334,337],{},[33,331,332],{},"键盘焦点","指示（配合 ",[54,335,336],{},":focus-visible","）",[38,339,341,342,337],{"id":340},"滤镜filter","滤镜（",[54,343,344],{},"filter",[23,346,347,348,351],{},"对元素（含其子内容）整体施加图形效果，常触发",[33,349,350],{},"合成层","，大量全屏滤镜有 GPU 成本。",[63,353,355],{"className":65,"code":354,"language":12,"meta":67,"style":67},".thumb {\n    filter: blur(4px) grayscale(50%);\n}\n.icon {\n    \u002F* 阴影轮廓；与 box-shadow 不同，follows 透明区域 *\u002F\n    filter: drop-shadow(0 4px 8px rgb(0 0 0 \u002F 0.25));\n}\n",[54,356,357,366,399,403,412,417,461],{"__ignoreMap":67},[71,358,359,361,364],{"class":73,"line":74},[71,360,78],{"class":77},[71,362,363],{"class":81},"thumb",[71,365,86],{"class":85},[71,367,368,371,373,376,378,381,383,385,388,390,393,396],{"class":73,"line":89},[71,369,370],{"class":92},"    filter",[71,372,96],{"class":85},[71,374,375],{"class":174}," blur",[71,377,178],{"class":85},[71,379,380],{"class":99},"4",[71,382,104],{"class":103},[71,384,202],{"class":85},[71,386,387],{"class":174}," grayscale",[71,389,178],{"class":85},[71,391,392],{"class":99},"50",[71,394,395],{"class":103},"%",[71,397,398],{"class":85},");\n",[71,400,401],{"class":73,"line":121},[71,402,213],{"class":85},[71,404,405,407,410],{"class":73,"line":136},[71,406,78],{"class":77},[71,408,409],{"class":81},"icon",[71,411,86],{"class":85},[71,413,414],{"class":73,"line":159},[71,415,416],{"class":162},"    \u002F* 阴影轮廓；与 box-shadow 不同，follows 透明区域 *\u002F\n",[71,418,419,421,423,426,428,431,433,435,437,439,442,444,446,449,451,455,458],{"class":73,"line":166},[71,420,370],{"class":92},[71,422,96],{"class":85},[71,424,425],{"class":174}," drop-shadow",[71,427,178],{"class":85},[71,429,430],{"class":99},"0",[71,432,144],{"class":99},[71,434,104],{"class":103},[71,436,129],{"class":99},[71,438,104],{"class":103},[71,440,441],{"class":174}," rgb",[71,443,178],{"class":85},[71,445,430],{"class":99},[71,447,448],{"class":99}," 0",[71,450,448],{"class":99},[71,452,454],{"class":453},"su5hD"," \u002F ",[71,456,457],{"class":99},"0.25",[71,459,460],{"class":85},"));\n",[71,462,463],{"class":73,"line":210},[71,464,213],{"class":85},[23,466,467,468,471,472,471,475,471,478,471,481,471,484,471,487,471,490,471,493,496,497,61],{},"常用函数：",[54,469,470],{},"blur()","、",[54,473,474],{},"brightness()",[54,476,477],{},"contrast()",[54,479,480],{},"grayscale()",[54,482,483],{},"hue-rotate()",[54,485,486],{},"invert()",[54,488,489],{},"opacity()",[54,491,492],{},"saturate()",[54,494,495],{},"sepia()","。多函数",[33,498,499],{},"按书写顺序依次应用",[501,502,503],"blockquote",{},[23,504,505,508,509,512,513,61],{},[54,506,507],{},"filter: opacity()"," 只影响该元素绘制，与元素自身 ",[54,510,511],{},"opacity"," 属性行为类似但作用域不同；子元素无法「逃出」父级 ",[54,514,344],{},[516,517,519],"h3",{"id":518},"backdrop-filter",[54,520,518],{},[23,522,523,524,527],{},"对元素",[33,525,526],{},"背后、已合成","的内容施加滤镜（毛玻璃、模糊遮罩），常用于半透明导航栏、模态层：",[63,529,531],{"className":65,"code":530,"language":12,"meta":67,"style":67},".glass {\n    background: rgb(255 255 255 \u002F 0.6);\n    backdrop-filter: blur(12px) saturate(120%);\n}\n",[54,532,533,542,568,598],{"__ignoreMap":67},[71,534,535,537,540],{"class":73,"line":74},[71,536,78],{"class":77},[71,538,539],{"class":81},"glass",[71,541,86],{"class":85},[71,543,544,547,549,551,553,556,559,561,563,566],{"class":73,"line":89},[71,545,546],{"class":92},"    background",[71,548,96],{"class":85},[71,550,441],{"class":174},[71,552,178],{"class":85},[71,554,555],{"class":99},"255",[71,557,558],{"class":99}," 255",[71,560,558],{"class":99},[71,562,454],{"class":453},[71,564,565],{"class":99},"0.6",[71,567,398],{"class":85},[71,569,570,573,575,577,579,582,584,586,589,591,594,596],{"class":73,"line":121},[71,571,572],{"class":92},"    backdrop-filter",[71,574,96],{"class":85},[71,576,375],{"class":174},[71,578,178],{"class":85},[71,580,581],{"class":99},"12",[71,583,104],{"class":103},[71,585,202],{"class":85},[71,587,588],{"class":174}," saturate",[71,590,178],{"class":85},[71,592,593],{"class":99},"120",[71,595,395],{"class":103},[71,597,398],{"class":85},[71,599,600],{"class":73,"line":136},[71,601,213],{"class":85},[23,603,604,605,607],{},"与 ",[54,606,344],{}," 一样会创建合成层；大面积模糊有性能成本。不支持时应有不透明背景回退。",[38,609,610],{"id":610},"混合模式",[278,612,613,623],{},[281,614,615],{},[284,616,617,620],{},[287,618,619],{},"属性",[287,621,622],{},"作用",[295,624,625,639],{},[284,626,627,632],{},[300,628,629],{},[54,630,631],{},"mix-blend-mode",[300,633,634,635,638],{},"元素与其",[33,636,637],{},"下方已合成内容","混合",[284,640,641,646],{},[300,642,643],{},[54,644,645],{},"background-blend-mode",[300,647,648,649,652],{},"同一元素",[33,650,651],{},"多层背景","之间混合",[63,654,656],{"className":65,"code":655,"language":12,"meta":67,"style":67},".hero {\n    background:\n        linear-gradient(to right, #3498db, #2ecc71),\n        url(\"photo.jpg\");\n    background-blend-mode: multiply;\n    background-size: cover;\n}\n.overlay {\n    mix-blend-mode: screen;\n}\n",[54,657,658,667,674,700,719,731,743,747,757,770],{"__ignoreMap":67},[71,659,660,662,665],{"class":73,"line":74},[71,661,78],{"class":77},[71,663,664],{"class":81},"hero",[71,666,86],{"class":85},[71,668,669,671],{"class":73,"line":89},[71,670,546],{"class":92},[71,672,673],{"class":85},":\n",[71,675,676,679,681,683,685,687,689,691,693,695,697],{"class":73,"line":121},[71,677,678],{"class":174},"        linear-gradient",[71,680,178],{"class":85},[71,682,182],{"class":181},[71,684,185],{"class":107},[71,686,188],{"class":85},[71,688,112],{"class":111},[71,690,115],{"class":107},[71,692,188],{"class":85},[71,694,112],{"class":111},[71,696,199],{"class":107},[71,698,699],{"class":85},"),\n",[71,701,702,705,707,711,715,717],{"class":73,"line":136},[71,703,704],{"class":174},"        url",[71,706,178],{"class":85},[71,708,710],{"class":709},"sjJ54","\"",[71,712,714],{"class":713},"s_sjI","photo.jpg",[71,716,710],{"class":709},[71,718,398],{"class":85},[71,720,721,724,726,729],{"class":73,"line":159},[71,722,723],{"class":92},"    background-blend-mode",[71,725,96],{"class":85},[71,727,728],{"class":107}," multiply",[71,730,118],{"class":85},[71,732,733,736,738,741],{"class":73,"line":166},[71,734,735],{"class":92},"    background-size",[71,737,96],{"class":85},[71,739,740],{"class":107}," cover",[71,742,118],{"class":85},[71,744,745],{"class":73,"line":210},[71,746,213],{"class":85},[71,748,750,752,755],{"class":73,"line":749},8,[71,751,78],{"class":77},[71,753,754],{"class":81},"overlay",[71,756,86],{"class":85},[71,758,760,763,765,768],{"class":73,"line":759},9,[71,761,762],{"class":92},"    mix-blend-mode",[71,764,96],{"class":85},[71,766,767],{"class":107}," screen",[71,769,118],{"class":85},[71,771,773],{"class":73,"line":772},10,[71,774,213],{"class":85},[38,776,777],{"id":777},"裁剪与遮罩",[516,779,781],{"id":780},"clip-path",[54,782,780],{},[23,784,785,786,789,790,792,793,795],{},"按路径裁剪",[33,787,788],{},"可见区域","（不含 ",[54,791,51],{}," 外侧），常用于几何形状、过渡动画（可动画 ",[54,794,780],{},"）。",[63,797,799],{"className":65,"code":798,"language":12,"meta":67,"style":67},".badge {\n    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);\n}\n",[54,800,801,810,864],{"__ignoreMap":67},[71,802,803,805,808],{"class":73,"line":74},[71,804,78],{"class":77},[71,806,807],{"class":81},"badge",[71,809,86],{"class":85},[71,811,812,815,817,820,822,824,826,828,830,832,835,837,840,842,844,846,848,850,852,854,856,858,860,862],{"class":73,"line":89},[71,813,814],{"class":92},"    clip-path",[71,816,96],{"class":85},[71,818,819],{"class":174}," polygon",[71,821,178],{"class":85},[71,823,392],{"class":99},[71,825,395],{"class":103},[71,827,448],{"class":99},[71,829,395],{"class":103},[71,831,188],{"class":85},[71,833,834],{"class":99}," 100",[71,836,395],{"class":103},[71,838,839],{"class":99}," 50",[71,841,395],{"class":103},[71,843,188],{"class":85},[71,845,839],{"class":99},[71,847,395],{"class":103},[71,849,834],{"class":99},[71,851,395],{"class":103},[71,853,188],{"class":85},[71,855,448],{"class":99},[71,857,395],{"class":103},[71,859,839],{"class":99},[71,861,395],{"class":103},[71,863,398],{"class":85},[71,865,866],{"class":73,"line":121},[71,867,213],{"class":85},[516,869,871,454,874],{"id":870},"mask-mask-image",[54,872,873],{},"mask",[54,875,876],{},"mask-image",[23,878,879,880,883,884,887,888,891,892,894],{},"用图像或渐变的 ",[33,881,882],{},"alpha\u002F亮度"," 控制透明度。标准属性为 ",[54,885,886],{},"mask-*","；部分环境仍需 ",[54,889,890],{},"-webkit-mask-*","。与 ",[54,893,780],{}," 相比更适合作柔和边缘。",[516,896,898,899,337],{"id":897},"渐变文字background-clip-text","渐变文字（",[54,900,901],{},"background-clip: text",[63,903,905],{"className":65,"code":904,"language":12,"meta":67,"style":67},".title {\n    background-image: linear-gradient(to right, #3498db, #2ecc71);\n    background-clip: text;\n    -webkit-background-clip: text; \u002F* WebKit 兼容 *\u002F\n    color: transparent;\n}\n",[54,906,907,916,945,957,973,985],{"__ignoreMap":67},[71,908,909,911,914],{"class":73,"line":74},[71,910,78],{"class":77},[71,912,913],{"class":81},"title",[71,915,86],{"class":85},[71,917,918,921,923,925,927,929,931,933,935,937,939,941,943],{"class":73,"line":89},[71,919,920],{"class":92},"    background-image",[71,922,96],{"class":85},[71,924,175],{"class":174},[71,926,178],{"class":85},[71,928,182],{"class":181},[71,930,185],{"class":107},[71,932,188],{"class":85},[71,934,112],{"class":111},[71,936,115],{"class":107},[71,938,188],{"class":85},[71,940,112],{"class":111},[71,942,199],{"class":107},[71,944,398],{"class":85},[71,946,947,950,952,955],{"class":73,"line":121},[71,948,949],{"class":92},"    background-clip",[71,951,96],{"class":85},[71,953,954],{"class":107}," text",[71,956,118],{"class":85},[71,958,959,963,965,967,970],{"class":73,"line":136},[71,960,962],{"class":961},"sZMiF","    -webkit-background-clip",[71,964,96],{"class":85},[71,966,954],{"class":107},[71,968,969],{"class":85},";",[71,971,972],{"class":162}," \u002F* WebKit 兼容 *\u002F\n",[71,974,975,978,980,983],{"class":73,"line":159},[71,976,977],{"class":92},"    color",[71,979,96],{"class":85},[71,981,982],{"class":107}," transparent",[71,984,118],{"class":85},[71,986,987],{"class":73,"line":166},[71,988,213],{"class":85},[23,990,991],{},"确保正文对比度仍达标；勿仅依赖渐变作为唯一信息载体。",[38,993,994],{"id":994},"性能与无障碍",[996,997,998,1008,1023],"ul",{},[999,1000,1001,1002,471,1005,1007],"li",{},"大区域 ",[54,1003,1004],{},"blur",[54,1006,631],{}," 谨慎使用；移动端注意电量与帧率。",[999,1009,1010,1013,1014,454,1016,1019,1020,1022],{},[33,1011,1012],{},"焦点环","用 ",[54,1015,56],{},[54,1017,1018],{},"box-shadow"," 模拟时，保证 ",[54,1021,336],{}," 清晰可见。",[999,1024,1025,1026,1029,1030,1033],{},"尊重 ",[54,1027,1028],{},"@media (prefers-reduced-motion: reduce)","，与 ",[27,1031,1032],{"href":29},"动画"," 章节一致。",[38,1035,1036],{"id":1036},"总结",[996,1038,1039,1047,1055],{},[999,1040,1041,1043,1044,1046],{},[33,1042,51],{}," 参与布局，",[33,1045,56],{}," 用于焦点、不占位。",[999,1048,1049,454,1051,1054],{},[33,1050,344],{},[33,1052,1053],{},"blend"," 适合局部强调，注意合成开销。",[999,1056,1057,454,1059,1061],{},[33,1058,780],{},[33,1060,873],{}," 控制可见形状；渐变字需兼顾对比度与兼容性。",[38,1063,1064],{"id":1064},"参考文献",[23,1066,1067],{},"以下链接在编写时均可正常访问：",[278,1069,1070,1080],{},[281,1071,1072],{},[284,1073,1074,1077],{},[287,1075,1076],{},"资料",[287,1078,1079],{},"说明",[295,1081,1082,1095,1107,1118,1130,1142,1154],{},[284,1083,1084,1092],{},[300,1085,1086],{},[27,1087,1091],{"href":1088,"rel":1089},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002Ffilter",[1090],"nofollow","MDN：filter",[300,1093,1094],{},"滤镜函数",[284,1096,1097,1104],{},[300,1098,1099],{},[27,1100,1103],{"href":1101,"rel":1102},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002Fbackdrop-filter",[1090],"MDN：backdrop-filter",[300,1105,1106],{},"背景模糊",[284,1108,1109,1116],{},[300,1110,1111],{},[27,1112,1115],{"href":1113,"rel":1114},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002Fmix-blend-mode",[1090],"MDN：mix-blend-mode",[300,1117,610],{},[284,1119,1120,1127],{},[300,1121,1122],{},[27,1123,1126],{"href":1124,"rel":1125},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002Fclip-path",[1090],"MDN：clip-path",[300,1128,1129],{},"裁剪路径",[284,1131,1132,1139],{},[300,1133,1134],{},[27,1135,1138],{"href":1136,"rel":1137},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002Fmask",[1090],"MDN：mask",[300,1140,1141],{},"遮罩",[284,1143,1144,1151],{},[300,1145,1146],{},[27,1147,1150],{"href":1148,"rel":1149},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002Foutline",[1090],"MDN：outline",[300,1152,1153],{},"轮廓与焦点",[284,1155,1156,1163],{},[300,1157,1158],{},[27,1159,1162],{"href":1160,"rel":1161},"https:\u002F\u002Fwww.w3.org\u002FTR\u002Ffilter-effects-1\u002F",[1090],"W3C：Filter Effects Module Level 1",[300,1164,1165],{},"滤镜规范（英文）",[1167,1168,1169],"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 .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 .s_hVV, html code.shiki .s_hVV{--shiki-light:#90A4AE;--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 .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 .sptTA, html code.shiki .sptTA{--shiki-light:#6182B8;--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 .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 .su5hD, html code.shiki .su5hD{--shiki-light:#90A4AE;--shiki-default:#24292E;--shiki-dark:#E1E4E8}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 .sZMiF, html code.shiki .sZMiF{--shiki-light:#E2931D;--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":67,"searchDepth":89,"depth":89,"links":1171},[1172,1173,1177,1178,1185,1186,1187],{"id":40,"depth":89,"text":40},{"id":340,"depth":89,"text":1174,"children":1175},"滤镜（filter）",[1176],{"id":518,"depth":121,"text":518},{"id":610,"depth":89,"text":610},{"id":777,"depth":89,"text":777,"children":1179},[1180,1181,1183],{"id":780,"depth":121,"text":780},{"id":870,"depth":121,"text":1182},"mask \u002F mask-image",{"id":897,"depth":121,"text":1184},"渐变文字（background-clip: text）",{"id":994,"depth":89,"text":994},{"id":1036,"depth":89,"text":1036},{"id":1064,"depth":89,"text":1064},{"title":8,"description":9},"knowledge\u002Fbooklet\u002Fweb\u002FCss\u002Fvisual-effects","knowledge\u002Fknowledge\u002Fbooklet\u002Fweb\u002FCss\u002Fvisual-effects.md","md",{"items":1193},[1194,1198,1202,1206,1210,1214],{"path":1195,"title":1196,"description":1197,"category":10,"score":166},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fless\u002Fless-core","Less 基础与核心语法","Less 是 JavaScript 实现的 CSS 预处理器，在 CSS 语法上扩展变量（@）、嵌套、混合、运算与函数，编译为普通 CSS 后由浏览器加载；本文覆盖安装、CLI、构建工具集成与全部核心语法。",{"path":1199,"title":1200,"description":1201,"category":10,"score":166},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-intro","Sass 简介与安装","Sass（Syntactically Awesome Style Sheets）是 CSS 预处理器，在 CSS 语法上增加变量、嵌套、混合、模块、控制指令等；有 SCSS 与缩进语法两种源码语法，官方实现为 Dart Sass。",{"path":1203,"title":1204,"description":1205,"category":10,"score":166},"\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":1207,"title":1208,"description":1209,"category":10,"score":166},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-reuse","复用机制：Mixin 与继承","Mixin（@mixin\u002F@include）支持参数与 @content，适合动态样式；@extend 与 %placeholder 通过合并选择器复用完全相同的静态样式，减少 CSS 体积。",{"path":1211,"title":1212,"description":1213,"category":10,"score":166},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-syntax","语法基础：变量、嵌套与运算","Sass 语法基础：$ 变量与插值、选择器嵌套与 & 父选择器引用、数学\u002F颜色\u002F字符串运算、三种注释语法及与原生 CSS 嵌套的关系。",{"path":1215,"title":1216,"description":1217,"category":10,"score":166},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fcolor","颜色与背景","color 设置前景（多为文字）色；background-* 设置元素背景（颜色、图像、渐变）。二者共同决定对比度与视觉层次，直接影响 无障碍 阅读体验。排版中的文本颜色用法见 排版与文本。",{"series":1219,"title":12,"items":1220,"index":1279,"prev":1280,"next":1281},"booklet\u002Fweb\u002Fcss",[1221,1224,1226,1230,1234,1238,1242,1246,1250,1254,1256,1258,1262,1266,1270,1274,1275,1276,1277,1278],{"path":29,"title":1222,"date":1223,"pinned":15},"变换、过渡与动画","2023-01-09",{"path":1215,"title":1216,"date":1225,"pinned":15},"2025-05-01",{"path":1227,"title":1228,"date":1229,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fcss-sass-less","CSS、Sass 与 Less","2019-09-28",{"path":1231,"title":1232,"date":1233,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fdisplay","display 与常规流","2024-01-30",{"path":1235,"title":1236,"date":1237,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fflex","弹性盒子","2020-09-29",{"path":1239,"title":1240,"date":1241,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Ffont-optimization","字体优化策略","2021-04-23",{"path":1243,"title":1244,"date":1245,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Ffont-unit","字体单位","2021-10-12",{"path":1247,"title":1248,"date":1249,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fgrid","网格布局","2020-11-09",{"path":1251,"title":1252,"date":1253,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Flayout-text","排版与文本","2024-01-25",{"path":1195,"title":1196,"date":1255,"pinned":15},"2026-07-23",{"path":46,"title":47,"date":1257,"pinned":15},"2023-09-04",{"path":1259,"title":1260,"date":1261,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fnew-css","现代 CSS 特性概览","2021-11-09",{"path":1263,"title":1264,"date":1265,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fposition","定位","2022-11-08",{"path":1267,"title":1268,"date":1269,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fless\u002Fproject","工程化集成与扩展","2024-07-02",{"path":1271,"title":1272,"date":1273,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fresponsive","响应式设计与交互","2022-01-31",{"path":1199,"title":1200,"date":1255,"pinned":15},{"path":1203,"title":1204,"date":1255,"pinned":15},{"path":1207,"title":1208,"date":1255,"pinned":15},{"path":1211,"title":1212,"date":1255,"pinned":15},{"path":7,"title":8,"date":14,"pinned":15},19,{"path":1211,"title":1212,"date":1255,"pinned":15},null]