[{"data":1,"prerenderedAt":2982},["ShallowReactive",2],{"blog-retro-90s-design-system":3},{"id":4,"title":5,"body":6,"date":2970,"description":2971,"extension":2972,"meta":2973,"navigation":2814,"path":2974,"seo":2975,"stem":2976,"tags":2977,"__hash__":2981},"blogs\u002Fblogs\u002Fretro-90s-design-system.md","复古\u002F90年代怀旧设计风格",{"type":7,"value":8,"toc":2923},"minimark",[9,14,18,26,32,38,41,45,50,53,365,371,393,396,402,440,445,483,488,514,517,527,532,553,559,562,567,634,645,650,721,726,772,783,789,838,844,863,867,870,876,1002,1005,1011,1064,1067,1072,1134,1137,1139,1142,1145,1150,1173,1178,1214,1219,1260,1266,1286,1291,1442,1446,1451,1472,1478,1486,1492,1507,1510,1527,1530,1535,1558,1566,1572,1578,1582,1585,1590,1623,1628,1642,1647,1653,1656,1661,1685,1691,1702,1704,1707,1710,1719,1724,1738,1748,1754,1778,1781,1787,1798,1804,1815,1821,1841,1847,1849,1853,1859,1862,1869,1880,1885,1896,1899,1902,1999,2005,2008,2015,2019,2022,2037,2043,2208,2212,2215,2218,2221,2235,2238,2241,2255,2258,2261,2272,2275,2278,2281,2284,2286,2289,2295,2300,2338,2342,2359,2364,2390,2399,2410,2412,2415,2420,2434,2439,2455,2460,2471,2476,2490,2499,2550,2552,2556,2560,2631,2635,2667,2671,2694,2696,2699,2703,2706,2712,2715,2719,2722,2747,2750,2760,2763,2795,2797,2800,2803,2901,2903,2906,2913,2916,2919],[10,11,13],"h1",{"id":12},"设计风格复古90年代怀旧-retro-90s-nostalgia","设计风格：复古\u002F90年代怀旧 (Retro \u002F 90s Nostalgia)",[15,16,17],"h2",{"id":17},"设计哲学",[19,20,21,25],"p",{},[22,23,24],"strong",{},"核心原则","：拥抱早期网络的原始、未经过滤的美学。这种设计庆祝1990年代网站的\"丑陋酷\"魅力——斜面按钮、系统字体、花哨的颜色和动画元素。它刻意反现代，拒绝极简主义，追求最大视觉冲击和怀旧真实性。每个像素都应该感觉像是在1997年的Windows 95机器上制作的。",[19,27,28,31],{},[22,29,30],{},"氛围","：俏皮、混乱、怀旧、毫无歉意地响亮。想想GeoCities页面、\"正在建设中\"横幅、访问计数器和留言簿。这不是关于看起来过时——而是关于捕捉早期互联网的乐观、实验精神，当时每个人都在摸索。这种美学应该足够真实，让经历过那个时代的人会心一笑。",[19,33,34,37],{},[22,35,36],{},"历史背景","：这种风格在1995-1999年间达到顶峰，当时个人电脑使用Windows 95\u002F98，显示器分辨率为800x600，网页浏览器提供的CSS有限。设计师在严重限制下工作，产生了一种我们正在忠实重现的独特视觉语言。",[39,40],"hr",{},[15,42,44],{"id":43},"设计token系统dna","设计Token系统（DNA）",[46,47,49],"h3",{"id":48},"颜色仅浅色模式","颜色（仅浅色模式）",[19,51,52],{},"这个调色板直接取自Windows 95系统颜色和早期网络十六进制值。",[54,55,56,75],"table",{},[57,58,59],"thead",{},[60,61,62,66,69,72],"tr",{},[63,64,65],"th",{},"Token",[63,67,68],{},"值",[63,70,71],{},"用途",[63,73,74],{},"备注",[76,77,78,98,116,134,152,170,188,206,224,241,259,276,294,312,330,348],"tbody",{},[60,79,80,87,92,95],{},[81,82,83],"td",{},[84,85,86],"code",{},"background",[81,88,89],{},[84,90,91],{},"#C0C0C0",[81,93,94],{},"主要页面背景",[81,96,97],{},"经典Windows 95按钮面灰色",[60,99,100,105,110,113],{},[81,101,102],{},[84,103,104],{},"foreground",[81,106,107],{},[84,108,109],{},"#000000",[81,111,112],{},"纯黑文字",[81,114,115],{},"最大对比度，正文文字不使用灰色",[60,117,118,123,128,131],{},[81,119,120],{},[84,121,122],{},"muted",[81,124,125],{},[84,126,127],{},"#808080",[81,129,130],{},"次要元素、元数据",[81,132,133],{},"正好50%灰色（128,128,128）",[60,135,136,141,146,149],{},[81,137,138],{},[84,139,140],{},"accent",[81,142,143],{},[84,144,145],{},"#0000FF",[81,147,148],{},"超链接（未访问）",[81,150,151],{},"纯蓝色最大饱和度",[60,153,154,159,164,167],{},[81,155,156],{},[84,157,158],{},"secondary",[81,160,161],{},[84,162,163],{},"#FF0000",[81,165,166],{},"热红色强调",[81,168,169],{},"纯红色最大饱和度",[60,171,172,177,182,185],{},[81,173,174],{},[84,175,176],{},"tertiary",[81,178,179],{},[84,180,181],{},"#FFFF00",[81,183,184],{},"亮黄色高亮",[81,186,187],{},"纯黄色，用于徽章和高亮",[60,189,190,195,200,203],{},[81,191,192],{},[84,193,194],{},"success",[81,196,197],{},[84,198,199],{},"#00FF00",[81,201,202],{},"柠檬绿",[81,204,205],{},"纯绿色最大饱和度",[60,207,208,213,218,221],{},[81,209,210],{},[84,211,212],{},"successDark",[81,214,215],{},[84,216,217],{},"#00AA00",[81,219,220],{},"按钮的深绿色",[81,222,223],{},"更可读的绿色变体",[60,225,226,231,235,238],{},[81,227,228],{},[84,229,230],{},"border",[81,232,233],{},[84,234,109],{},[81,236,237],{},"纯黑边框",[81,239,240],{},"用于外边框",[60,242,243,248,253,256],{},[81,244,245],{},[84,246,247],{},"borderLight",[81,249,250],{},[84,251,252],{},"#FFFFFF",[81,254,255],{},"3D高亮白色",[81,257,258],{},"顶部\u002F左侧斜面边缘",[60,260,261,266,270,273],{},[81,262,263],{},[84,264,265],{},"borderDark",[81,267,268],{},[84,269,127],{},[81,271,272],{},"3D阴影灰色",[81,274,275],{},"底部\u002F右侧斜面边缘",[60,277,278,283,288,291],{},[81,279,280],{},[84,281,282],{},"titleBar",[81,284,285],{},[84,286,287],{},"#000080",[81,289,290],{},"Windows标题栏海军蓝",[81,292,293],{},"纯深蓝色（海军蓝）",[60,295,296,301,306,309],{},[81,297,298],{},[84,299,300],{},"titleBarGradientEnd",[81,302,303],{},[84,304,305],{},"#1084D0",[81,307,308],{},"标题栏渐变",[81,310,311],{},"Windows 98活动窗口渐变",[60,313,314,319,324,327],{},[81,315,316],{},[84,317,318],{},"panelYellow",[81,320,321],{},[84,322,323],{},"#FFFFCC",[81,325,326],{},"浅黄色内容面板",[81,328,329],{},"真实的Windows记事本\u002F帮助颜色",[60,331,332,337,342,345],{},[81,333,334],{},[84,335,336],{},"visitedLink",[81,338,339],{},[84,340,341],{},"#800080",[81,343,344],{},"已访问超链接",[81,346,347],{},"紫色\u002F栗色",[60,349,350,355,359,362],{},[81,351,352],{},[84,353,354],{},"hoverLink",[81,356,357],{},[84,358,163],{},[81,360,361],{},"链接悬停状态",[81,363,364],{},"红色",[19,366,367,370],{},[22,368,369],{},"颜色关系","：",[372,373,374,378,390],"ul",{},[375,376,377],"li",{},"所有颜色都是最大饱和度（纯RGB值，至少一个通道在0或255）",[375,379,380,381,383,384,383,386,383,388],{},"没有渐变灰色 - 只有 ",[84,382,109],{},"、",[84,385,127],{},[84,387,91],{},[84,389,252],{},[375,391,392],{},"链接遵循经典顺序：蓝色 → 紫色（已访问） → 红色（悬停）",[46,394,395],{"id":395},"字体排版",[19,397,398,401],{},[22,399,400],{},"字体栈","（唤起1995-1999年的系统字体）：",[372,403,404,412,421,430],{},[375,405,406,370,409],{},[22,407,408],{},"主要正文",[84,410,411],{},"\"MS Sans Serif\", \"Segoe UI\", Tahoma, Geneva, Verdana, sans-serif",[375,413,414,370,417,420],{},[22,415,416],{},"标题",[84,418,419],{},"\"Arial Black\", Impact, Haettenschweiler, sans-serif","（仅粗重、粗体）",[375,422,423,370,426,429],{},[22,424,425],{},"等宽",[84,427,428],{},"\"Courier New\", Courier, monospace","（用于日期、统计、计数器、类代码元素）",[375,431,432,435,436,439],{},[22,433,434],{},"俏皮点缀","（极少使用）：",[84,437,438],{},"\"Comic Sans MS\", cursive","（仅用于\"有趣\"的装饰元素如果需要）",[19,441,442,370],{},[22,443,444],{},"字号",[372,446,447,453,459,465,471,477],{},[375,448,449,452],{},[22,450,451],{},"H1首屏","：48px-96px（3xl到6xl），总是大写或首字母大写，Arial Black\u002FImpact",[375,454,455,458],{},[22,456,457],{},"H2章节","：32-48px（2xl到4xl），经常大写，Arial Black",[375,460,461,464],{},[22,462,463],{},"H3小节","：20-24px（lg到xl），粗体字重",[375,466,467,470],{},[22,468,469],{},"正文","：14-16px，默认字重，可读密度",[375,472,473,476],{},[22,474,475],{},"小\u002F元数据","：12px（xs），经常等宽用于日期和元数据",[375,478,479,482],{},[22,480,481],{},"标签","：10-12px，大写，有时等宽",[19,484,485,370],{},[22,486,487],{},"字体排版模式",[372,489,490,493,504,507],{},[375,491,492],{},"标题是粗体或黑色字重 - 这个时代不存在细体或轻体",[375,494,495,496,499,500,503],{},"大写标题的字间距：",[84,497,498],{},"tracking-tight"," 到 ",[84,501,502],{},"tracking-wide","（不扩展）",[375,505,506],{},"行高：紧凑（标题1.2-1.4，正文1.5-1.6）",[375,508,509,510,513],{},"3D文字的文字阴影：",[84,511,512],{},"text-shadow: 2px 2px 0 #808080","（硬边，无模糊）",[46,515,516],{"id":516},"圆角与边框",[19,518,519,522,523,526],{},[22,520,521],{},"圆角","：到处都是 ",[84,524,525],{},"0px","。没有例外。90年代没有圆角。",[19,528,529,370],{},[22,530,531],{},"边框宽度",[372,533,534,540,546],{},[375,535,536,537],{},"标准：大多数元素 ",[84,538,539],{},"2px",[375,541,542,543],{},"强调：章节分隔线和高亮元素 ",[84,544,545],{},"4px",[375,547,548,549,552],{},"最小：仅微妙内部细节 ",[84,550,551],{},"1px","（罕见）",[19,554,555,558],{},[22,556,557],{},"3D斜面效果","（标志性特征）：",[19,560,561],{},"这是最关键的视觉效果。Windows 95使用特定的4值边框颜色语法结合box-shadow创造深度。",[19,563,564,370],{},[22,565,566],{},"外凸（凸起）- 看起来突出的元素",[568,569,574],"pre",{"className":570,"code":571,"language":572,"meta":573,"style":573},"language-css shiki shiki-themes one-dark-pro","border: 2px solid;\nborder-color: #ffffff #808080 #808080 #ffffff; \u002F* 上 右 下 左 *\u002F\nbox-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #dfdfdf;\n","css","",[84,575,576,585,612],{"__ignoreMap":573},[577,578,581],"span",{"class":579,"line":580},"line",1,[577,582,584],{"class":583},"seHd6","border: 2px solid;\n",[577,586,588,592,595,599,603,605,608],{"class":579,"line":587},2,[577,589,591],{"class":590},"sVyAn","border-color",[577,593,594],{"class":583},": ",[577,596,598],{"class":597},"sVbv2","#ffffff",[577,600,602],{"class":601},"sLaUg"," #808080",[577,604,602],{"class":601},[577,606,607],{"class":601}," #ffffff;",[577,609,611],{"class":610},"sV9Aq"," \u002F* 上 右 下 左 *\u002F\n",[577,613,615,618,621,624,628,631],{"class":579,"line":614},3,[577,616,617],{"class":590},"box-shadow",[577,619,620],{"class":583},": inset -1px -1px 0 ",[577,622,623],{"class":601},"#404040",[577,625,627],{"class":626},"sn6KH",",",[577,629,630],{"class":583}," inset 1px 1px 0 ",[577,632,633],{"class":601},"#dfdfdf;\n",[372,635,636,639,642],{},[375,637,638],{},"顶部和左侧边缘：白色（#ffffff）",[375,640,641],{},"底部和右侧边缘：灰色（#808080）",[375,643,644],{},"内部阴影用更深（#404040）和更浅（#dfdfdf）的点缀增加深度",[19,646,647,370],{},[22,648,649],{},"外凸增强（更深斜面）",[568,651,653],{"className":570,"code":652,"language":572,"meta":573,"style":573},"border: 2px solid;\nborder-color: #ffffff #808080 #808080 #ffffff;\nbox-shadow:\n  inset -2px -2px 0 #808080,\n  inset 2px 2px 0 #fff,\n  inset -4px -4px 0 #404040,\n  inset 4px 4px 0 #dfdfdf;\n",[84,654,655,659,674,681,692,703,713],{"__ignoreMap":573},[577,656,657],{"class":579,"line":580},[577,658,584],{"class":583},[577,660,661,663,665,667,669,671],{"class":579,"line":587},[577,662,591],{"class":590},[577,664,594],{"class":583},[577,666,598],{"class":597},[577,668,602],{"class":601},[577,670,602],{"class":601},[577,672,673],{"class":601}," #ffffff;\n",[577,675,676,678],{"class":579,"line":614},[577,677,617],{"class":590},[577,679,680],{"class":583},":\n",[577,682,684,687,689],{"class":579,"line":683},4,[577,685,686],{"class":583},"  inset -2px -2px 0 ",[577,688,127],{"class":601},[577,690,691],{"class":626},",\n",[577,693,695,698,701],{"class":579,"line":694},5,[577,696,697],{"class":583},"  inset 2px 2px 0 ",[577,699,700],{"class":597},"#fff",[577,702,691],{"class":626},[577,704,706,709,711],{"class":579,"line":705},6,[577,707,708],{"class":583},"  inset -4px -4px 0 ",[577,710,623],{"class":601},[577,712,691],{"class":626},[577,714,716,719],{"class":579,"line":715},7,[577,717,718],{"class":583},"  inset 4px 4px 0 ",[577,720,633],{"class":601},[19,722,723,370],{},[22,724,725],{},"内凹（下沉）- 看起来压入的元素",[568,727,729],{"className":570,"code":728,"language":572,"meta":573,"style":573},"border: 2px solid;\nborder-color: #808080 #ffffff #ffffff #808080; \u002F* 与外凸相反 *\u002F\nbox-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #dfdfdf;\n",[84,730,731,735,756],{"__ignoreMap":573},[577,732,733],{"class":579,"line":580},[577,734,584],{"class":583},[577,736,737,739,741,743,746,748,750,753],{"class":579,"line":587},[577,738,591],{"class":590},[577,740,594],{"class":583},[577,742,127],{"class":601},[577,744,745],{"class":597}," #ffffff",[577,747,745],{"class":597},[577,749,602],{"class":601},[577,751,752],{"class":583},";",[577,754,755],{"class":610}," \u002F* 与外凸相反 *\u002F\n",[577,757,758,760,763,765,767,770],{"class":579,"line":614},[577,759,617],{"class":590},[577,761,762],{"class":583},": inset 1px 1px 0 ",[577,764,623],{"class":601},[577,766,627],{"class":626},[577,768,769],{"class":583}," inset -1px -1px 0 ",[577,771,633],{"class":601},[372,773,774,777,780],{},[375,775,776],{},"顶部和左侧边缘：灰色（#808080）",[375,778,779],{},"底部和右侧边缘：白色（#ffffff）",[375,781,782],{},"内部阴影创造凹陷外观",[19,784,785,788],{},[22,786,787],{},"活跃\u002F按下状态","：\n当外凸元素被点击时，它变成内凹并向下和向右平移1px：",[568,790,792],{"className":570,"code":791,"language":572,"meta":573,"style":573},"border-color: #808080 #ffffff #ffffff #808080;\nbox-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #dfdfdf;\ntransform: translate(1px, 1px);\n",[84,793,794,811,825],{"__ignoreMap":573},[577,795,796,798,800,802,804,806,808],{"class":579,"line":580},[577,797,591],{"class":590},[577,799,594],{"class":583},[577,801,127],{"class":601},[577,803,745],{"class":597},[577,805,745],{"class":597},[577,807,602],{"class":601},[577,809,810],{"class":583},";\n",[577,812,813,815,817,819,821,823],{"class":579,"line":587},[577,814,617],{"class":590},[577,816,762],{"class":583},[577,818,623],{"class":601},[577,820,627],{"class":626},[577,822,769],{"class":583},[577,824,633],{"class":601},[577,826,827,830,832,835],{"class":579,"line":614},[577,828,829],{"class":583},"transform: translate(1px",[577,831,627],{"class":626},[577,833,834],{"class":583}," 1px",[577,836,837],{"class":626},");\n",[19,839,840,843],{},[22,841,842],{},"Tailwind实现","：\n使用下划线代替空格：",[372,845,846,852,858],{},[375,847,848,851],{},[84,849,850],{},"[border-color:#fff_#808080_#808080_#fff]"," 用于外凸",[375,853,854,857],{},[84,855,856],{},"[border-color:#808080_#fff_#fff_#808080]"," 用于内凹",[375,859,860],{},[84,861,862],{},"[box-shadow:inset_-1px_-1px_0_#404040,inset_1px_1px_0_#dfdfdf]",[46,864,866],{"id":865},"纹理与图案强制性","纹理与图案（强制性）",[19,868,869],{},"背景绝不能是平的。这对真实性至关重要。",[19,871,872,875],{},[22,873,874],{},"90年代平铺图案","（主要技术）：",[568,877,879],{"className":570,"code":878,"language":572,"meta":573,"style":573},"background-color: #c0c0c0;\nbackground-image:\n  linear-gradient(45deg, #b8b8b8 25%, transparent 25%),\n  linear-gradient(-45deg, #b8b8b8 25%, transparent 25%),\n  linear-gradient(45deg, transparent 75%, #b8b8b8 75%),\n  linear-gradient(-45deg, transparent 75%, #b8b8b8 75%);\nbackground-size: 4px 4px;\nbackground-position: 0 0, 0 2px, 2px -2px, -2px 0px;\n",[84,880,881,891,898,919,936,954,970,978],{"__ignoreMap":573},[577,882,883,886,888],{"class":579,"line":580},[577,884,885],{"class":590},"background-color",[577,887,594],{"class":583},[577,889,890],{"class":601},"#c0c0c0;\n",[577,892,893,896],{"class":579,"line":587},[577,894,895],{"class":590},"background-image",[577,897,680],{"class":583},[577,899,900,903,905,908,911,913,916],{"class":579,"line":614},[577,901,902],{"class":583},"  linear-gradient(45deg",[577,904,627],{"class":626},[577,906,907],{"class":597}," #b8b8b8",[577,909,910],{"class":583}," 25%",[577,912,627],{"class":626},[577,914,915],{"class":583}," transparent 25%",[577,917,918],{"class":626},"),\n",[577,920,921,924,926,928,930,932,934],{"class":579,"line":683},[577,922,923],{"class":583},"  linear-gradient(-45deg",[577,925,627],{"class":626},[577,927,907],{"class":597},[577,929,910],{"class":583},[577,931,627],{"class":626},[577,933,915],{"class":583},[577,935,918],{"class":626},[577,937,938,940,942,945,947,949,952],{"class":579,"line":694},[577,939,902],{"class":583},[577,941,627],{"class":626},[577,943,944],{"class":583}," transparent 75%",[577,946,627],{"class":626},[577,948,907],{"class":597},[577,950,951],{"class":583}," 75%",[577,953,918],{"class":626},[577,955,956,958,960,962,964,966,968],{"class":579,"line":705},[577,957,923],{"class":583},[577,959,627],{"class":626},[577,961,944],{"class":583},[577,963,627],{"class":626},[577,965,907],{"class":597},[577,967,951],{"class":583},[577,969,837],{"class":626},[577,971,972,975],{"class":579,"line":715},[577,973,974],{"class":590},"background-size",[577,976,977],{"class":583},": 4px 4px;\n",[577,979,981,984,987,989,992,994,997,999],{"class":579,"line":980},8,[577,982,983],{"class":590},"background-position",[577,985,986],{"class":583},": 0 0",[577,988,627],{"class":626},[577,990,991],{"class":583}," 0 2px",[577,993,627],{"class":626},[577,995,996],{"class":583}," 2px -2px",[577,998,627],{"class":626},[577,1000,1001],{"class":583}," -2px 0px;\n",[19,1003,1004],{},"这创造出微妙的对角交叉线纹理，提供纹理而不会分散注意力。",[19,1006,1007,1010],{},[22,1008,1009],{},"施工警示条纹","（用于强调区域）：",[568,1012,1014],{"className":570,"code":1013,"language":572,"meta":573,"style":573},"background: repeating-linear-gradient(\n  45deg,\n  #ffff00,\n  #ffff00 10px,\n  #000000 10px,\n  #000000 20px\n);\n",[84,1015,1016,1021,1028,1035,1044,1053,1060],{"__ignoreMap":573},[577,1017,1018],{"class":579,"line":580},[577,1019,1020],{"class":583},"background: repeating-linear-gradient(\n",[577,1022,1023,1026],{"class":579,"line":587},[577,1024,1025],{"class":583},"  45deg",[577,1027,691],{"class":626},[577,1029,1030,1033],{"class":579,"line":614},[577,1031,1032],{"class":597},"  #ffff00",[577,1034,691],{"class":626},[577,1036,1037,1039,1042],{"class":579,"line":683},[577,1038,1032],{"class":597},[577,1040,1041],{"class":583}," 10px",[577,1043,691],{"class":626},[577,1045,1046,1049,1051],{"class":579,"line":694},[577,1047,1048],{"class":601},"  #000000",[577,1050,1041],{"class":583},[577,1052,691],{"class":626},[577,1054,1055,1057],{"class":579,"line":705},[577,1056,1048],{"class":601},[577,1058,1059],{"class":583}," 20px\n",[577,1061,1062],{"class":579,"line":715},[577,1063,837],{"class":626},[19,1065,1066],{},"正好10px黄色，10px黑色条纹，45度角。",[19,1068,1069,370],{},[22,1070,1071],{},"带凹槽效果的水平线（HR）",[568,1073,1075],{"className":570,"code":1074,"language":572,"meta":573,"style":573},"border: none;\nheight: 4px;\nbackground: linear-gradient(\n  to bottom,\n  #808080 0%, #808080 50%,\n  #ffffff 50%, #ffffff 100%\n);\n",[84,1076,1077,1082,1087,1092,1099,1116,1130],{"__ignoreMap":573},[577,1078,1079],{"class":579,"line":580},[577,1080,1081],{"class":583},"border: none;\n",[577,1083,1084],{"class":579,"line":587},[577,1085,1086],{"class":583},"height: 4px;\n",[577,1088,1089],{"class":579,"line":614},[577,1090,1091],{"class":583},"background: linear-gradient(\n",[577,1093,1094,1097],{"class":579,"line":683},[577,1095,1096],{"class":583},"  to bottom",[577,1098,691],{"class":626},[577,1100,1101,1104,1107,1109,1111,1114],{"class":579,"line":694},[577,1102,1103],{"class":601},"  #808080",[577,1105,1106],{"class":583}," 0%",[577,1108,627],{"class":626},[577,1110,602],{"class":601},[577,1112,1113],{"class":583}," 50%",[577,1115,691],{"class":626},[577,1117,1118,1121,1123,1125,1127],{"class":579,"line":705},[577,1119,1120],{"class":597},"  #ffffff",[577,1122,1113],{"class":583},[577,1124,627],{"class":626},[577,1126,745],{"class":597},[577,1128,1129],{"class":583}," 100%\n",[577,1131,1132],{"class":579,"line":715},[577,1133,837],{"class":626},[19,1135,1136],{},"创造出经典的\"蚀刻\"分隔线外观。",[39,1138],{},[15,1140,1141],{"id":1141},"组件样式原则",[46,1143,1144],{"id":1144},"按钮",[19,1146,1147,370],{},[22,1148,1149],{},"视觉要求",[372,1151,1152,1155,1158,1164,1167,1170],{},[375,1153,1154],{},"边框：2px，4值外凸颜色模式",[375,1156,1157],{},"背景：取决于变体的微妙渐变或纯色",[375,1159,1160,1161,1163],{},"文字：粗体、大写配合 ",[84,1162,502],{},"，居中",[375,1165,1166],{},"内边距：垂直8px，水平16px（舒适的点击区域）",[375,1168,1169],{},"无圆角",[375,1171,1172],{},"无柔和投影",[19,1174,1175,370],{},[22,1176,1177],{},"状态过渡",[372,1179,1180,1186,1192,1198,1204],{},[375,1181,1182,1185],{},[22,1183,1184],{},"默认","：外凸斜面，悬停时背景稍亮",[375,1187,1188,1191],{},[22,1189,1190],{},"悬停","：背景变亮1-2个色阶，保持外凸",[375,1193,1194,1197],{},[22,1195,1196],{},"活跃\u002F按下","：内凸斜面（反转border-color），translate(1px, 1px)",[375,1199,1200,1203],{},[22,1201,1202],{},"焦点","：2px黑色虚线轮廓，2px偏移（Windows 95焦点环）",[375,1205,1206,1209,1210,1213],{},[22,1207,1208],{},"过渡","：无或即时（",[84,1211,1212],{},"transition-none"," 或最大50ms）- 无平滑缓动",[19,1215,1216,370],{},[22,1217,1218],{},"变体",[1220,1221,1222,1230,1238,1246,1254],"ol",{},[375,1223,1224,370,1227,1229],{},[22,1225,1226],{},"默认\u002F幽灵",[84,1228,91],{}," 背景，黑色文字，外凸斜面",[375,1231,1232,370,1235,1237],{},[22,1233,1234],{},"点缀\u002F主要",[84,1236,145],{}," 背景，白色文字，蓝色色调斜面边缘",[375,1239,1240,370,1243,1245],{},[22,1241,1242],{},"危险",[84,1244,163],{}," 背景，白色文字，红色色调斜面边缘",[375,1247,1248,370,1251,1253],{},[22,1249,1250],{},"成功",[84,1252,217],{},"（可读绿色）背景，白色文字，绿色色调斜面边缘",[375,1255,1256,1259],{},[22,1257,1258],{},"轮廓","：白色背景，黑色文字，外凸斜面",[19,1261,1262,1265],{},[22,1263,1264],{},"斜面颜色着色","：\n对于彩色按钮，将斜面边缘着色以匹配：",[372,1267,1268,1274,1280],{},[375,1269,1270,1271],{},"蓝色按钮：",[84,1272,1273],{},"border-color: #5555ff #000080 #000080 #5555ff",[375,1275,1276,1277],{},"红色按钮：",[84,1278,1279],{},"border-color: #ff5555 #800000 #800000 #ff5555",[375,1281,1282,1283],{},"绿色按钮：",[84,1284,1285],{},"border-color: #00ff00 #006600 #006600 #00ff00",[19,1287,1288,370],{},[22,1289,1290],{},"示例Tailwind类",[568,1292,1294],{"className":570,"code":1293,"language":572,"meta":573,"style":573},"border-2\nbg-[#c0c0c0]\ntext-black\n[border-color:#fff_#808080_#808080_#fff]\n[box-shadow:inset_-1px_-1px_0_#404040,inset_1px_1px_0_#dfdfdf]\nhover:bg-[#d0d0d0]\nactive:[border-color:#808080_#fff_#fff_#808080]\nactive:[box-shadow:inset_1px_1px_0_#404040,inset_-1px_-1px_0_#dfdfdf]\nactive:translate-x-[1px]\nactive:translate-y-[1px]\nfocus-visible:outline-dotted\nfocus-visible:outline-2\nfocus-visible:outline-black\nfocus-visible:outline-offset-2\n",[84,1295,1296,1301,1316,1321,1331,1341,1355,1360,1369,1386,1400,1412,1422,1432],{"__ignoreMap":573},[577,1297,1298],{"class":579,"line":580},[577,1299,1300],{"class":590},"border-2\n",[577,1302,1303,1306,1309,1313],{"class":579,"line":587},[577,1304,1305],{"class":590},"bg-",[577,1307,1308],{"class":583},"[#",[577,1310,1312],{"class":1311},"sVC51","c0c0c0",[577,1314,1315],{"class":583},"]\n",[577,1317,1318],{"class":579,"line":614},[577,1319,1320],{"class":590},"text-black\n",[577,1322,1323,1326,1329],{"class":579,"line":683},[577,1324,1325],{"class":583},"[border-color:#fff_#808080_#808080_#",[577,1327,1328],{"class":1311},"fff",[577,1330,1315],{"class":583},[577,1332,1333,1336,1339],{"class":579,"line":694},[577,1334,1335],{"class":583},"[box-shadow:inset_-1px_-1px_0_#404040,inset_1px_1px_0_#",[577,1337,1338],{"class":1311},"dfdfdf",[577,1340,1315],{"class":583},[577,1342,1343,1346,1348,1350,1353],{"class":579,"line":705},[577,1344,1345],{"class":583},"hover:",[577,1347,1305],{"class":590},[577,1349,1308],{"class":583},[577,1351,1352],{"class":1311},"d0d0d0",[577,1354,1315],{"class":583},[577,1356,1357],{"class":579,"line":715},[577,1358,1359],{"class":583},"active:[border-color:#808080_#fff_#fff_#808080]\n",[577,1361,1362,1365,1367],{"class":579,"line":980},[577,1363,1364],{"class":583},"active:[box-shadow:inset_1px_1px_0_#404040,inset_-1px_-1px_0_#",[577,1366,1338],{"class":1311},[577,1368,1315],{"class":583},[577,1370,1372,1375,1378,1381,1384],{"class":579,"line":1371},9,[577,1373,1374],{"class":583},"active:",[577,1376,1377],{"class":590},"translate-x-",[577,1379,1380],{"class":583},"[1",[577,1382,1383],{"class":1311},"px",[577,1385,1315],{"class":583},[577,1387,1389,1391,1394,1396,1398],{"class":579,"line":1388},10,[577,1390,1374],{"class":583},[577,1392,1393],{"class":590},"translate-y-",[577,1395,1380],{"class":583},[577,1397,1383],{"class":1311},[577,1399,1315],{"class":583},[577,1401,1403,1406,1409],{"class":579,"line":1402},11,[577,1404,1405],{"class":590},"focus-visible",[577,1407,1408],{"class":583},":",[577,1410,1411],{"class":590},"outline-dotted\n",[577,1413,1415,1417,1419],{"class":579,"line":1414},12,[577,1416,1405],{"class":590},[577,1418,1408],{"class":583},[577,1420,1421],{"class":590},"outline-2\n",[577,1423,1425,1427,1429],{"class":579,"line":1424},13,[577,1426,1405],{"class":590},[577,1428,1408],{"class":583},[577,1430,1431],{"class":590},"outline-black\n",[577,1433,1435,1437,1439],{"class":579,"line":1434},14,[577,1436,1405],{"class":590},[577,1438,1408],{"class":583},[577,1440,1441],{"class":590},"outline-offset-2\n",[46,1443,1445],{"id":1444},"卡片容器","卡片\u002F容器",[19,1447,1448,370],{},[22,1449,1450],{},"面板\u002F卡片结构",[372,1452,1453,1459,1466],{},[375,1454,1455,1456,1458],{},"容器：2px外凸斜面，",[84,1457,91],{}," 背景",[375,1460,1461,1462,1465],{},"标题栏：渐变 ",[84,1463,1464],{},"linear-gradient(to right, #000080, #1084d0)","，白色文字，粗体，4-8px内边距",[375,1467,1468,1469,1471],{},"内容区域：内凸斜面（下沉），白色或 ",[84,1470,323],{},"（黄色）背景",[19,1473,1474,1477],{},[22,1475,1476],{},"窗口风格卡片","（最独特）：",[568,1479,1484],{"className":1480,"code":1482,"language":1483},[1481],"language-text","外部容器：外凸斜面，灰色背景\n├── 标题栏：海军蓝渐变（#000080 → #1084d0），白色粗体文字\n└── 内容区域：内凸斜面，白色背景，内边距16px\n","text",[84,1485,1482],{"__ignoreMap":573},[19,1487,1488,1491],{},[22,1489,1490],{},"交替行背景","：\n对于表格状布局，在以下之间交替：",[372,1493,1494,1500],{},[375,1495,1496,1497,1499],{},"偶数行：",[84,1498,252],{},"（白色）",[375,1501,1502,1503,1506],{},"奇数行：",[84,1504,1505],{},"#E8E8E8","（浅灰色）",[19,1508,1509],{},"这创造出经典的电子表格\u002F数据库外观。",[19,1511,1512,1515,1516,1519,1520,1523,1524,1526],{},[22,1513,1514],{},"单元格之间的边框","：\n使用 ",[84,1517,1518],{},"border-right-2"," 和 ",[84,1521,1522],{},"border-bottom-2"," 配合 ",[84,1525,127],{}," 创造可见网格线。",[46,1528,1529],{"id":1529},"表单输入框",[19,1531,1532,370],{},[22,1533,1534],{},"输入字段",[372,1536,1537,1540,1543,1546,1549,1552],{},[375,1538,1539],{},"边框：2px内凹（下沉外观）",[375,1541,1542],{},"背景：白色",[375,1544,1545],{},"文字：黑色，14-16px",[375,1547,1548],{},"内边距：4-8px",[375,1550,1551],{},"焦点：2px黑色虚线轮廓，2px偏移",[375,1553,1554,1555,1557],{},"禁用：",[84,1556,91],{}," 背景，50%不透明度",[19,1559,1560,370,1563,1565],{},[22,1561,1562],{},"占位符文字",[84,1564,127],{},"（灰色）",[19,1567,1568,1571],{},[22,1569,1570],{},"选择下拉框","：与输入框相同的内凹样式",[19,1573,1574,1577],{},[22,1575,1576],{},"复选框\u002F单选","：90年代网页不常见（使用文字指示器或简单方块）",[46,1579,1581],{"id":1580},"链接超链接","链接（超链接）",[19,1583,1584],{},"90年代网络最具标志性的元素。",[19,1586,1587,370],{},[22,1588,1589],{},"状态",[372,1591,1592,1600,1608,1615],{},[375,1593,1594,370,1597,1599],{},[22,1595,1596],{},"未访问",[84,1598,145],{},"（蓝色），总是有下划线",[375,1601,1602,370,1605,1607],{},[22,1603,1604],{},"已访问",[84,1606,341],{},"（紫色）",[375,1609,1610,370,1612,1614],{},[22,1611,1190],{},[84,1613,163],{},"（红色）",[375,1616,1617,1620,1621,1614],{},[22,1618,1619],{},"活跃","（点击时）：",[84,1622,163],{},[19,1624,1625,370],{},[22,1626,1627],{},"规则",[372,1629,1630,1633,1636,1639],{},[375,1631,1632],{},"总是有下划线（绝不移除text-decoration）",[375,1634,1635],{},"颜色变化是即时的（无过渡）",[375,1637,1638],{},"悬停无背景",[375,1640,1641],{},"无额外样式效果",[19,1643,1644,370],{},[22,1645,1646],{},"示例",[568,1648,1651],{"className":1649,"code":1650,"language":1483},[1481],"text-[#0000ff]\nunderline\nhover:text-[#ff0000]\nvisited:text-[#800080]\n",[84,1652,1650],{"__ignoreMap":573},[46,1654,1655],{"id":1655},"图标",[19,1657,1658,370],{},[22,1659,1660],{},"样式",[372,1662,1663,1673,1676,1679,1682],{},[375,1664,1665,1666,1668,1669,1672],{},"描边宽度：",[84,1667,539],{}," 或 ",[84,1670,1671],{},"stroke-[2px]","（粗、粗线条）",[375,1674,1675],{},"颜色：匹配章节的点缀色（蓝色、红色、绿色）",[375,1677,1678],{},"尺寸：24px（h-6 w-6）标准，32px用于功能",[375,1680,1681],{},"无圆角或柔和形状",[375,1683,1684],{},"考虑在图标容器周围添加2px黑色边框",[19,1686,1687,1690],{},[22,1688,1689],{},"图标容器","：\n如果将图标放在彩色框中：",[372,1692,1693,1696,1699],{},[375,1694,1695],{},"框背景：纯亮色（#000080、#008080、#00AA00）",[375,1697,1698],{},"图标颜色：白色",[375,1700,1701],{},"框样式：外凸或带边框的平面",[39,1703],{},[15,1705,1706],{"id":1706},"布局原则",[46,1708,1709],{"id":1709},"页面结构",[19,1711,1712,370,1715,1718],{},[22,1713,1714],{},"最大宽度",[84,1716,1717],{},"max-w-5xl"," (1024px) - 模仿800x600显示器内容区域带浏览器边框",[19,1720,1721,370],{},[22,1722,1723],{},"间距系统",[372,1725,1726,1729,1732,1735],{},[375,1727,1728],{},"基础单位：8px",[375,1730,1731],{},"元素内边距：16px（丰厚的内部间距）",[375,1733,1734],{},"元素外边距：8-16px（更紧的外部间距以获得密度）",[375,1736,1737],{},"章节内边距：垂直64px（py-16），水平16px（px-4）",[19,1739,1740,1743,1744,1747],{},[22,1741,1742],{},"章节分隔线","：\n使用粗边框（",[84,1745,1746],{},"border-b-4 border-[#808080]","）或在主要章节之间使用凹槽HR效果。",[19,1749,1750,1753],{},[22,1751,1752],{},"网格布局","：\n即使使用现代CSS Grid\u002FFlexbox，也要让它看起来像表格：",[372,1755,1756,1770,1772,1775],{},[375,1757,1758,1759,1668,1762,1765,1766,1769],{},"用 ",[84,1760,1761],{},"border-2",[84,1763,1764],{},"border-r-2","\u002F",[84,1767,1768],{},"border-b-2"," 可见单元格边框",[375,1771,1490],{},[375,1773,1774],{},"尽可能等列宽",[375,1776,1777],{},"密集、紧凑的间距",[46,1779,1780],{"id":1780},"响应式策略",[19,1782,1783,1786],{},[22,1784,1785],{},"桌面端"," (768px+)：",[372,1788,1789,1792,1795],{},[375,1790,1791],{},"完整的类表格布局，并排列",[375,1793,1794],{},"多列网格（2-4列）",[375,1796,1797],{},"可见的复杂边框",[19,1799,1800,1803],{},[22,1801,1802],{},"平板端"," (640-768px)：",[372,1805,1806,1809,1812],{},[375,1807,1808],{},"最多减少到2列",[375,1810,1811],{},"保持所有视觉样式（斜面、边框）",[375,1813,1814],{},"如果需要，堆叠复杂表格",[19,1816,1817,1820],{},[22,1818,1819],{},"移动端"," (\u003C640px)：",[372,1822,1823,1826,1832,1835,1838],{},[375,1824,1825],{},"单列",[375,1827,1828,1831],{},[22,1829,1830],{},"保留斜面效果","（对风格至关重要）",[375,1833,1834],{},"跑马灯继续滚动",[375,1836,1837],{},"稍微缩小字体但保持粗体字重",[375,1839,1840],{},"复杂表格的水平滚动是可接受的（真实！）",[19,1842,1843,1846],{},[22,1844,1845],{},"重要","：美学比完美响应更重要。移动端体验稍微粗糙是可以的——这对那个时代是真实的。",[39,1848],{},[15,1850,1852],{"id":1851},"大胆因素非通用性","\"大胆因素\"（非通用性）",[19,1854,1855,1858],{},[22,1856,1857],{},"强制性元素"," - 这些必须存在，否则风格失败：",[46,1860,1861],{"id":1861},"跑马灯滚动文字",[19,1863,1864,1865,1868],{},"使用 ",[84,1866,1867],{},"react-fast-marquee"," 或纯CSS跑马灯用于：",[372,1870,1871,1874,1877],{},[375,1872,1873],{},"彩色文字的公告栏",[375,1875,1876],{},"推荐语轮播",[375,1878,1879],{},"\"突发新闻\"风格更新",[19,1881,1882,370],{},[22,1883,1884],{},"设置",[372,1886,1887,1890,1893],{},[375,1888,1889],{},"速度：30-60（中等速度）",[375,1891,1892],{},"无渐变淡出（gradient={false}）",[375,1894,1895],{},"不同颜色的多个span",[46,1897,1898],{"id":1898},"动画彩虹文字",[19,1900,1901],{},"CSS动画循环彩虹色用于首屏标题：",[568,1903,1905],{"className":570,"code":1904,"language":572,"meta":573,"style":573},"@keyframes rainbow {\n  0% { color: #ff0000; }\n  17% { color: #ff8000; }\n  33% { color: #ffff00; }\n  50% { color: #00ff00; }\n  67% { color: #0080ff; }\n  83% { color: #8000ff; }\n  100% { color: #ff0000; }\n}\nanimation: rainbow 4s linear infinite;\n",[84,1906,1907,1919,1930,1940,1950,1960,1970,1980,1989,1994],{"__ignoreMap":573},[577,1908,1909,1912,1916],{"class":579,"line":580},[577,1910,1911],{"class":583},"@keyframes",[577,1913,1915],{"class":1914},"s_ZVi"," rainbow",[577,1917,1918],{"class":626}," {\n",[577,1920,1921,1924,1927],{"class":579,"line":587},[577,1922,1923],{"class":626},"  0% { color: ",[577,1925,1926],{"class":1311},"#ff0000",[577,1928,1929],{"class":626},"; }\n",[577,1931,1932,1935,1938],{"class":579,"line":614},[577,1933,1934],{"class":626},"  17% { color: ",[577,1936,1937],{"class":1311},"#ff8000",[577,1939,1929],{"class":626},[577,1941,1942,1945,1948],{"class":579,"line":683},[577,1943,1944],{"class":626},"  33% { color: ",[577,1946,1947],{"class":1311},"#ffff00",[577,1949,1929],{"class":626},[577,1951,1952,1955,1958],{"class":579,"line":694},[577,1953,1954],{"class":626},"  50% { color: ",[577,1956,1957],{"class":1311},"#00ff00",[577,1959,1929],{"class":626},[577,1961,1962,1965,1968],{"class":579,"line":705},[577,1963,1964],{"class":626},"  67% { color: ",[577,1966,1967],{"class":1311},"#0080ff",[577,1969,1929],{"class":626},[577,1971,1972,1975,1978],{"class":579,"line":715},[577,1973,1974],{"class":626},"  83% { color: ",[577,1976,1977],{"class":1311},"#8000ff",[577,1979,1929],{"class":626},[577,1981,1982,1985,1987],{"class":579,"line":980},[577,1983,1984],{"class":626},"  100% { color: ",[577,1986,1926],{"class":1311},[577,1988,1929],{"class":626},[577,1990,1991],{"class":579,"line":1371},[577,1992,1993],{"class":626},"}\n",[577,1995,1996],{"class":579,"line":1388},[577,1997,1998],{"class":583},"animation: rainbow 4s linear infinite;\n",[19,2000,2001,2004],{},[22,2002,2003],{},"时长","：4秒，线性缓动（无平滑）",[46,2006,2007],{"id":2007},"所有元素斜面",[19,2009,2010,2011,2014],{},"每个交互元素和大多数容器必须有3D外凸\u002F内凹效果。这是",[22,2012,2013],{},"不可协商的","。",[46,2016,2018],{"id":2017},"正在建设中能量","\"正在建设中\"能量",[19,2020,2021],{},"添加小动画元素：",[372,2023,2024,2031,2034],{},[375,2025,2026,2027,2030],{},"闪烁的\"NEW!\"徽章（使用 ",[84,2028,2029],{},"animate-pulse"," 或CSS闪烁配合step-end）",[375,2032,2033],{},"脉动的CTA徽章",[375,2035,2036],{},"颜色循环装饰元素",[19,2038,2039,2042],{},[22,2040,2041],{},"脉动光晕动画","（用于徽章）：",[568,2044,2046],{"className":570,"code":2045,"language":572,"meta":573,"style":573},"@keyframes pulse-glow {\n  0%, 100% {\n    transform: scale(1);\n    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);\n  }\n  50% {\n    transform: scale(1.05);\n    box-shadow: 0 0 10px 2px rgba(255, 0, 0, 0.5);\n  }\n}\nanimation: pulse-glow 1.5s ease-in-out infinite;\n",[84,2047,2048,2057,2062,2079,2118,2123,2128,2141,2180,2184,2188],{"__ignoreMap":573},[577,2049,2050,2052,2055],{"class":579,"line":580},[577,2051,1911],{"class":583},[577,2053,2054],{"class":1914}," pulse-glow",[577,2056,1918],{"class":626},[577,2058,2059],{"class":579,"line":587},[577,2060,2061],{"class":626},"  0%, 100% {\n",[577,2063,2064,2067,2071,2074,2077],{"class":579,"line":614},[577,2065,2066],{"class":626},"    transform: ",[577,2068,2070],{"class":2069},"sjrmR","scale",[577,2072,2073],{"class":626},"(",[577,2075,2076],{"class":1311},"1",[577,2078,837],{"class":626},[577,2080,2081,2084,2087,2090,2092,2094,2097,2099,2102,2105,2107,2109,2111,2113,2116],{"class":579,"line":683},[577,2082,2083],{"class":626},"    box-shadow: ",[577,2085,2086],{"class":1311},"0",[577,2088,2089],{"class":1311}," 0",[577,2091,2089],{"class":1311},[577,2093,2089],{"class":1311},[577,2095,2096],{"class":2069}," rgba",[577,2098,2073],{"class":626},[577,2100,2101],{"class":1311},"255",[577,2103,2104],{"class":626},", ",[577,2106,2086],{"class":1311},[577,2108,2104],{"class":626},[577,2110,2086],{"class":1311},[577,2112,2104],{"class":626},[577,2114,2115],{"class":1311},"0.7",[577,2117,837],{"class":626},[577,2119,2120],{"class":579,"line":694},[577,2121,2122],{"class":626},"  }\n",[577,2124,2125],{"class":579,"line":705},[577,2126,2127],{"class":626},"  50% {\n",[577,2129,2130,2132,2134,2136,2139],{"class":579,"line":715},[577,2131,2066],{"class":626},[577,2133,2070],{"class":2069},[577,2135,2073],{"class":626},[577,2137,2138],{"class":1311},"1.05",[577,2140,837],{"class":626},[577,2142,2143,2145,2147,2149,2152,2154,2157,2159,2161,2163,2165,2167,2169,2171,2173,2175,2178],{"class":579,"line":980},[577,2144,2083],{"class":626},[577,2146,2086],{"class":1311},[577,2148,2089],{"class":1311},[577,2150,2151],{"class":1311}," 10",[577,2153,1383],{"class":590},[577,2155,2156],{"class":1311}," 2",[577,2158,1383],{"class":590},[577,2160,2096],{"class":2069},[577,2162,2073],{"class":626},[577,2164,2101],{"class":1311},[577,2166,2104],{"class":626},[577,2168,2086],{"class":1311},[577,2170,2104],{"class":626},[577,2172,2086],{"class":1311},[577,2174,2104],{"class":626},[577,2176,2177],{"class":1311},"0.5",[577,2179,837],{"class":626},[577,2181,2182],{"class":579,"line":1371},[577,2183,2122],{"class":626},[577,2185,2186],{"class":579,"line":1388},[577,2187,1993],{"class":626},[577,2189,2190,2193,2196,2199,2202,2205],{"class":579,"line":1402},[577,2191,2192],{"class":583},"animation: ",[577,2194,2195],{"class":590},"pulse-glow",[577,2197,2198],{"class":583}," 1",[577,2200,2201],{"class":1311},".5s",[577,2203,2204],{"class":590}," ease-in-out",[577,2206,2207],{"class":583}," infinite;\n",[46,2209,2211],{"id":2210},"水平线hr作为分隔线","水平线（HR）作为分隔线",[19,2213,2214],{},"在主要内容章节之间使用3D凹槽效果。这是90年代的标志性图案。",[46,2216,2217],{"id":2217},"访问计数器美学",[19,2219,2220],{},"至少将一个统计部分样式化为经典访问计数器：",[372,2222,2223,2226,2229,2232],{},[375,2224,2225],{},"黑色或海军蓝背景",[375,2227,2228],{},"绿色等宽文字（#00FF00）",[375,2230,2231],{},"斜面内凹框架",[375,2233,2234],{},"文字如 \"Visitors: 0001234 | Since 1995\"",[46,2236,2237],{"id":2237},"类表格视觉布局",[19,2239,2240],{},"即使使用现代CSS，也要创建HTML表格的外观：",[372,2242,2243,2250,2252],{},[375,2244,2245,2246,2249],{},"可见单元格边框（",[84,2247,2248],{},"border-2 border-[#808080]","）",[375,2251,1490],{},[375,2253,2254],{},"网格状精度",[46,2256,2257],{"id":2257},"标题栏窗口",[19,2259,2260],{},"卡片应该看起来像Windows 95应用程序窗口：",[372,2262,2263,2266,2269],{},[375,2264,2265],{},"海军蓝到蓝色渐变标题栏",[375,2267,2268],{},"标题中白色粗体文字",[375,2270,2271],{},"下方内凹内容区域",[46,2273,2274],{"id":2274},"装饰彩色方块",[19,2276,2277],{},"包含至少一个部分，其中有亮色方块网格（红色、绿色、蓝色、黄色、洋红、青色）带斜面边缘。这是纯粹的装饰性90年代过剩。",[46,2279,2280],{"id":2280},"施工条纹背景",[19,2282,2283],{},"在至少一个强调部分（如最终CTA）使用黄\u002F黑对角条纹图案。",[39,2285],{},[15,2287,2288],{"id":2288},"动画与运动",[19,2290,2291,2294],{},[22,2292,2293],{},"运动哲学","：快速、即时、数字化。没有有机缓动曲线。",[19,2296,2297,370],{},[22,2298,2299],{},"时间函数",[372,2301,2302,2312,2321,2330],{},[375,2303,2304,370,2307,1668,2309],{},[22,2305,2306],{},"即时状态变化",[84,2308,1212],{},[84,2310,2311],{},"duration-0",[375,2313,2314,370,2317,2320],{},[22,2315,2316],{},"颜色循环",[84,2318,2319],{},"linear","（无缓动）",[375,2322,2323,370,2326,2329],{},[22,2324,2325],{},"徽章\u002F脉动",[84,2327,2328],{},"ease-in-out","（用于注意效果可接受）",[375,2331,2332,370,2335,2337],{},[22,2333,2334],{},"按钮按下",[84,2336,1212],{}," 或最大50ms",[19,2339,2340,370],{},[22,2341,2003],{},[372,2343,2344,2347,2350,2353,2356],{},[375,2345,2346],{},"按钮按下：即时或50ms",[375,2348,2349],{},"悬停颜色变化：75ms或即时",[375,2351,2352],{},"彩虹文字循环：3-5秒",[375,2354,2355],{},"脉动光晕：1-2秒",[375,2357,2358],{},"跑马灯速度：中等（40-60px\u002F秒）",[19,2360,2361,370],{},[22,2362,2363],{},"关键动画",[1220,2365,2366,2372,2378,2384],{},[375,2367,2368,2371],{},[22,2369,2370],{},"彩虹文字","：4s线性无限循环穿过光谱",[375,2373,2374,2377],{},[22,2375,2376],{},"脉动光晕","：1.5s ease-in-out无限循环用于\"NEW!\"徽章",[375,2379,2380,2383],{},[22,2381,2382],{},"闪烁","（极少使用）：1s step-end无限（硬开\u002F关，非淡出）",[375,2385,2386,2389],{},[22,2387,2388],{},"跑马灯","：连续滚动，悬停暂停以获得可用性",[19,2391,2392,2395,2396,370],{},[22,2393,2394],{},"减少运动","：\n尊重 ",[84,2397,2398],{},"prefers-reduced-motion",[372,2400,2401,2404,2407],{},[375,2402,2403],{},"停止彩虹动画（回退到单一亮色）",[375,2405,2406],{},"停止跑马灯（显示静态或更慢滚动）",[375,2408,2409],{},"停止脉动徽章（静态配合亮色）",[39,2411],{},[15,2413,2414],{"id":2414},"无障碍",[19,2416,2417,370],{},[22,2418,2419],{},"颜色对比",[372,2421,2422,2425,2428,2431],{},[375,2423,2424],{},"银色（#C0C0C0）上的黑色（#000000）：7.5:1（AAA）",[375,2426,2427],{},"海军蓝（#000080）上的白色：8.6:1（AAA）",[375,2429,2430],{},"蓝色（#0000FF）上的白色：8.6:1（AAA）",[375,2432,2433],{},"调色板自然提供优秀的对比",[19,2435,2436,370],{},[22,2437,2438],{},"焦点状态",[372,2440,2441,2444,2447,2450],{},[375,2442,2443],{},"2px黑色虚线轮廓（Windows 95真实）",[375,2445,2446],{},"2px距元素偏移",[375,2448,2449],{},"高可见度，匹配美学",[375,2451,2452],{},[22,2453,2454],{},"绝不移除焦点指示器",[19,2456,2457,370],{},[22,2458,2459],{},"键盘导航",[372,2461,2462,2465,2468],{},[375,2463,2464],{},"所有交互元素必须可键盘访问",[375,2466,2467],{},"Tab顺序应遵循视觉顺序",[375,2469,2470],{},"Enter\u002FSpace上的按钮按下应显示活跃状态",[19,2472,2473,370],{},[22,2474,2475],{},"屏幕阅读器",[372,2477,2478,2481,2484,2487],{},[375,2479,2480],{},"跑马灯文字必须有静态替代或aria-live=\"polite\"",[375,2482,2483],{},"装饰动画元素应aria-hidden",[375,2485,2486],{},"彩色方块和装饰图案不需要替代文字",[375,2488,2489],{},"即使有表格外观，也要确保语义HTML",[19,2491,2492,2495,2496,2498],{},[22,2493,2494],{},"运动敏感","：\n提供 ",[84,2497,2398],{}," 替代：",[568,2500,2502],{"className":570,"code":2501,"language":572,"meta":573,"style":573},"@media (prefers-reduced-motion: reduce) {\n  .text-rainbow { animation: none; color: #ff0000; }\n  .animate-pulse-glow { animation: none; }\n  \u002F* 跑马灯由库或CSS处理 *\u002F\n}\n",[84,2503,2504,2512,2530,2541,2546],{"__ignoreMap":573},[577,2505,2506,2509],{"class":579,"line":580},[577,2507,2508],{"class":583},"@media",[577,2510,2511],{"class":626}," (prefers-reduced-motion: reduce) {\n",[577,2513,2514,2517,2520,2523,2526,2528],{"class":579,"line":587},[577,2515,2516],{"class":1311},"  .text-rainbow",[577,2518,2519],{"class":626}," { animation: ",[577,2521,2522],{"class":1311},"none",[577,2524,2525],{"class":626},"; color: ",[577,2527,1926],{"class":1311},[577,2529,1929],{"class":626},[577,2531,2532,2535,2537,2539],{"class":579,"line":614},[577,2533,2534],{"class":1311},"  .animate-pulse-glow",[577,2536,2519],{"class":626},[577,2538,2522],{"class":1311},[577,2540,1929],{"class":626},[577,2542,2543],{"class":579,"line":683},[577,2544,2545],{"class":610},"  \u002F* 跑马灯由库或CSS处理 *\u002F\n",[577,2547,2548],{"class":579,"line":694},[577,2549,1993],{"class":626},[39,2551],{},[15,2553,2555],{"id":2554},"反模式避免什么","反模式（避免什么）",[46,2557,2559],{"id":2558},"视觉禁忌","视觉禁忌：",[1220,2561,2562,2567,2572,2589,2595,2601,2607,2613,2619,2625],{},[375,2563,2564,2566],{},[22,2565,1169],{}," - 连1px都不行。零。总是。",[375,2568,2569,2571],{},[22,2570,1172],{}," - 仅使用内阴影用于斜面",[375,2573,2574,2577,2578],{},[22,2575,2576],{},"无渐变","，除了：\n",[372,2579,2580,2583,2586],{},[375,2581,2582],{},"标题栏渐变（海军蓝到蓝色）",[375,2584,2585],{},"背景图案（条纹、平铺）",[375,2587,2588],{},"微妙按钮背景",[375,2590,2591,2594],{},[22,2592,2593],{},"无半透明叠加"," - 颜色总是不透明的（深色背景上白色\u002F80用于次要文字除外）",[375,2596,2597,2600],{},[22,2598,2599],{},"无细字体"," - 一切都是粗体或黑色字重",[375,2602,2603,2606],{},[22,2604,2605],{},"无微妙灰色"," - 只有 #000000、#808080、#C0C0C0、#FFFFFF、#E8E8E8",[375,2608,2609,2612],{},[22,2610,2611],{},"无平滑缓动"," - 使用线性或即时过渡",[375,2614,2615,2618],{},[22,2616,2617],{},"绝不移除链接下划线"," - 总是可见",[375,2620,2621,2624],{},[22,2622,2623],{},"无现代极简间距"," - 密集，不通风",[375,2626,2627,2630],{},[22,2628,2629],{},"不要尝试\"现代化\"美学"," - 拥抱俗气",[46,2632,2634],{"id":2633},"交互禁忌","交互禁忌：",[1220,2636,2637,2643,2649,2655,2661],{},[375,2638,2639,2642],{},[22,2640,2641],{},"不要使用缩放元素的悬停状态","（除了脉动徽章的1.05）",[375,2644,2645,2648],{},[22,2646,2647],{},"不要使用淡出过渡"," - 变化应该即时或线性",[375,2650,2651,2654],{},[22,2652,2653],{},"不要把跑马灯文字做成基本内容"," - 保持装饰性\u002F补充性",[375,2656,2657,2660],{},[22,2658,2659],{},"不要覆盖浏览器默认选择颜色"," - 实际上，要：使用 #000080 背景，白色文字",[375,2662,2663,2666],{},[22,2664,2665],{},"不要使用浮动操作按钮"," 或现代UI模式",[46,2668,2670],{"id":2669},"内容禁忌","内容禁忌：",[1220,2672,2673,2679,2685],{},[375,2674,2675,2678],{},[22,2676,2677],{},"不要使用不适合时代的占位文字","（不要有\"lorem ipsum\"）",[375,2680,2681,2684],{},[22,2682,2683],{},"不要在装饰文字中引用现代技术","（保持通用或90年代主题）",[375,2686,2687,2690,2691],{},[22,2688,2689],{},"不要微妙"," - 这种风格是",[22,2692,2693],{},"响亮而自豪的",[39,2695],{},[15,2697,2698],{"id":2698},"实现说明",[46,2700,2702],{"id":2701},"tailwind任意值","Tailwind任意值",[19,2704,2705],{},"你会经常使用这些：",[568,2707,2710],{"className":2708,"code":2709,"language":1483},[1481],"border-[2px]\n[border-color:#fff_#808080_#808080_#fff]\n[box-shadow:inset_-1px_-1px_0_#404040,inset_1px_1px_0_#dfdfdf]\nbg-[#c0c0c0]\ntext-[#0000ff]\n",[84,2711,2709],{"__ignoreMap":573},[19,2713,2714],{},"注意：在任意值中使用下划线代替空格。",[46,2716,2718],{"id":2717},"需要自定义css","需要自定义CSS",[19,2720,2721],{},"有些效果需要CSS文件：",[372,2723,2724,2729,2735,2741],{},[375,2725,2726,2728],{},[84,2727,1911],{}," 用于彩虹、脉动光晕、闪烁",[375,2730,2731,2734],{},[84,2732,2733],{},".hr-groove"," 用于水平线效果",[375,2736,2737,2740],{},[84,2738,2739],{},".bg-90s-tile"," 用于平铺背景图案",[375,2742,2743,2746],{},[84,2744,2745],{},".bg-construction"," 用于警示条纹",[46,2748,2749],{"id":2749},"依赖",[372,2751,2752,2757],{},[375,2753,2754,2756],{},[22,2755,1867],{},"：真实滚动文字必备",[375,2758,2759],{},"考虑为可重用性创建CSS变量用于复杂的box-shadow值",[46,2761,2762],{"id":2762},"颜色分层策略",[1220,2764,2765,2771,2777,2783,2789],{},[375,2766,2767,2770],{},[22,2768,2769],{},"基础","：平铺的 #C0C0C0 背景",[375,2772,2773,2776],{},[22,2774,2775],{},"表面","：白色或灰色（#E8E8E8）面板带斜面",[375,2778,2779,2782],{},[22,2780,2781],{},"点缀表面","：海军蓝标题栏、彩色功能框",[375,2784,2785,2788],{},[22,2786,2787],{},"前景","：黑色文字、彩色图标",[375,2790,2791,2794],{},[22,2792,2793],{},"高亮","：黄色徽章、红色\"NEW!\"标签、彩虹文字",[39,2796],{},[15,2798,2799],{"id":2799},"标志性视觉检查清单",[19,2801,2802],{},"在考虑设计完成之前，验证这些存在：",[372,2804,2807,2817,2823,2829,2835,2841,2847,2853,2859,2865,2871,2877,2883,2889,2895],{"className":2805},[2806],"contains-task-list",[375,2808,2811,2816],{"className":2809},[2810],"task-list-item",[2812,2813],"input",{"disabled":2814,"type":2815},true,"checkbox"," 至少一个跑马灯滚动元素配合彩色文字",[375,2818,2820,2822],{"className":2819},[2810],[2812,2821],{"disabled":2814,"type":2815}," 首屏或主要标题上的彩虹动画文字",[375,2824,2826,2828],{"className":2825},[2810],[2812,2827],{"disabled":2814,"type":2815}," 所有按钮都有3D外凸斜面配合正确的border-color语法",[375,2830,2832,2834],{"className":2831},[2810],[2812,2833],{"disabled":2814,"type":2815}," 至少一个卡片有Windows 95标题栏渐变",[375,2836,2838,2840],{"className":2837},[2810],[2812,2839],{"disabled":2814,"type":2815}," 主体上可见的平铺背景图案",[375,2842,2844,2846],{"className":2843},[2810],[2812,2845],{"disabled":2814,"type":2815}," 超链接是蓝色\u002F下划线，悬停时变红",[375,2848,2850,2852],{"className":2849},[2810],[2812,2851],{"disabled":2814,"type":2815}," 至少一个部分有交替行背景",[375,2854,2856,2858],{"className":2855},[2810],[2812,2857],{"disabled":2814,"type":2815}," 主要章节之间的水平凹槽线分隔线",[375,2860,2862,2864],{"className":2861},[2810],[2812,2863],{"disabled":2814,"type":2815}," 等宽绿色文字的\"访问计数器\"风格统计显示",[375,2866,2868,2870],{"className":2867},[2810],[2812,2869],{"disabled":2814,"type":2815}," 至少一个\"NEW!\"或\"HOT!\"徽章配合脉动动画",[375,2872,2874,2876],{"className":2873},[2810],[2812,2875],{"disabled":2814,"type":2815}," 至少一个部分有施工条纹背景",[375,2878,2880,2882],{"className":2879},[2810],[2812,2881],{"disabled":2814,"type":2815}," 所有交互元素都有虚线焦点轮廓",[375,2884,2886,2888],{"className":2885},[2810],[2812,2887],{"disabled":2814,"type":2815}," 活跃按钮显示按下状态（内凹 + 平移）",[375,2890,2892,2894],{"className":2891},[2810],[2812,2893],{"disabled":2814,"type":2815}," 图标有2px描边宽度",[375,2896,2898,2900],{"className":2897},[2810],[2812,2899],{"disabled":2814,"type":2815}," 任何地方都没有圆角实例",[39,2902],{},[15,2904,2905],{"id":2905},"秘诀",[19,2907,2908,2909,2912],{},"让这种风格奏效的是",[22,2910,2911],{},"对真实性的承诺胜过现代化","。诱惑将是\"清理它\"或\"让它更专业\"。抵制这个。丑陋就是美。冲突的颜色、密集的布局、激进的动画——这些不是bug，它们是特性。",[19,2914,2915],{},"经历过1997年的人看着这个应该立即感觉被带回去。设计应该如此真实，以至于与现代网站并列时几乎令人吃惊。这种对比就是重点。",[19,2917,2918],{},"拥抱俗气。庆祝混乱。欢迎来到1997年。",[2920,2921,2922],"style",{},"html pre.shiki code .seHd6, html code.shiki .seHd6{--shiki-default:#C678DD}html pre.shiki code .sVyAn, html code.shiki .sVyAn{--shiki-default:#E06C75}html pre.shiki code .sVbv2, html code.shiki .sVbv2{--shiki-default:#61AFEF}html pre.shiki code .sLaUg, html code.shiki .sLaUg{--shiki-default:#FFFFFF}html pre.shiki code .sV9Aq, html code.shiki .sV9Aq{--shiki-default:#7F848E;--shiki-default-font-style:italic}html pre.shiki code .sn6KH, html code.shiki .sn6KH{--shiki-default:#ABB2BF}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 pre.shiki code .sVC51, html code.shiki .sVC51{--shiki-default:#D19A66}html pre.shiki code .s_ZVi, html code.shiki .s_ZVi{--shiki-default:#E06C75;--shiki-default-font-style:italic}html pre.shiki code .sjrmR, html code.shiki .sjrmR{--shiki-default:#56B6C2}",{"title":573,"searchDepth":614,"depth":614,"links":2924},[2925,2926,2932,2939,2943,2955,2956,2957,2962,2968,2969],{"id":17,"depth":587,"text":17},{"id":43,"depth":587,"text":44,"children":2927},[2928,2929,2930,2931],{"id":48,"depth":614,"text":49},{"id":395,"depth":614,"text":395},{"id":516,"depth":614,"text":516},{"id":865,"depth":614,"text":866},{"id":1141,"depth":587,"text":1141,"children":2933},[2934,2935,2936,2937,2938],{"id":1144,"depth":614,"text":1144},{"id":1444,"depth":614,"text":1445},{"id":1529,"depth":614,"text":1529},{"id":1580,"depth":614,"text":1581},{"id":1655,"depth":614,"text":1655},{"id":1706,"depth":587,"text":1706,"children":2940},[2941,2942],{"id":1709,"depth":614,"text":1709},{"id":1780,"depth":614,"text":1780},{"id":1851,"depth":587,"text":1852,"children":2944},[2945,2946,2947,2948,2949,2950,2951,2952,2953,2954],{"id":1861,"depth":614,"text":1861},{"id":1898,"depth":614,"text":1898},{"id":2007,"depth":614,"text":2007},{"id":2017,"depth":614,"text":2018},{"id":2210,"depth":614,"text":2211},{"id":2217,"depth":614,"text":2217},{"id":2237,"depth":614,"text":2237},{"id":2257,"depth":614,"text":2257},{"id":2274,"depth":614,"text":2274},{"id":2280,"depth":614,"text":2280},{"id":2288,"depth":587,"text":2288},{"id":2414,"depth":587,"text":2414},{"id":2554,"depth":587,"text":2555,"children":2958},[2959,2960,2961],{"id":2558,"depth":614,"text":2559},{"id":2633,"depth":614,"text":2634},{"id":2669,"depth":614,"text":2670},{"id":2698,"depth":587,"text":2698,"children":2963},[2964,2965,2966,2967],{"id":2701,"depth":614,"text":2702},{"id":2717,"depth":614,"text":2718},{"id":2749,"depth":614,"text":2749},{"id":2762,"depth":614,"text":2762},{"id":2799,"depth":587,"text":2799},{"id":2905,"depth":587,"text":2905},"2026-04-15","充满怀旧气息的 90 年代美学，搭配 Windows 95 的斜边用户界面、系统字体、鲜艳的主色调、滚动字幕以及极致的视觉混乱感。","md",{},"\u002Fblogs\u002Fretro-90s-design-system",{"title":5,"description":2971},"blogs\u002Fretro-90s-design-system",[2978,2979,2980],"UI设计","提示词","复古风格","xAwMbnSXysWee_p789DCB_FVyayscCh5zpN5DtIB0zE",1780651451858]