Web 2.0 Gloss Web 2.0 光泽（Web 2.0 Gloss）
Web 2.0 Gloss is the startup aesthetic of roughly 2006–2012: candy gel buttons with a white top-edge inner glow, mirror-floor reflections under every element, spiky starburst badges shouting BETA, and corners pushed as round as the brand-new CSS3 border-radius allowed. Everything sits on a clean white page under bright, friendly gradients — lime, sky blue, sunny orange — with soft fuzzy shadows and Arial or Verdana type. The shine is synthetic and commercial: gloss as salesmanship, not nature.
Web 2.0 光泽是大约 2006–2012 年间的创业公司美学：糖果凝胶按钮顶部边缘一圈白色内发光，每个元素脚下踩着镜面地板倒影，带尖角的星形爆炸贴喊着 BETA，圆角推到当时刚诞生的 CSS3 border-radius 允许的极限。一切都摆在干净的白色页面上，配明亮友好的渐变——青柠、天蓝、阳光橙——加上柔和模糊的投影和 Arial 或 Verdana 字体。这种亮泽是人造的、商业的：光泽是推销术，不是大自然。
Scope: The marketing-site chrome of the second web boom — gel buttons, floor reflections, starburst badges, big radii. Its contemporary Frutiger Aero shares the gloss and the years but infuses nature; Apple's earlier desktop gel-button look is Aqua; the synthetic chrome wave that preceded both is Y2K.
范围：第二次互联网繁荣期的营销网站外观——凝胶按钮、地板倒影、星形爆炸贴、大圆角。与它同时代的 Frutiger Aero 共享这份光泽和年代，但融入了自然元素；Apple 更早的桌面凝胶按钮风格是 Aqua；在两者之前的合成铬色浪潮是 Y2K。
标本可交互 —— 点点看。Specimen is live — try it.
If you called it…如果你管它叫……
Full style DNA完整风格 DNA
-
Mirror-floor reflections镜面地板倒影 surface defining定义特征
Buttons, badges, photos, and logos are duplicated upside-down beneath themselves and faded out with a gradient mask within 40–60% of their height, as if standing on polished glass. No reflection, no Web 2.0.
按钮、徽章、照片和 Logo 都会在正下方被上下颠倒地复制一份，并在自身高度 40–60% 的范围内用渐变蒙版淡出，像站在抛光的玻璃上。没有倒影，就不是 Web 2.0。
-
Candy gel buttons糖果凝胶按钮 surface defining定义特征
Vertical-gradient pills — lime #b7e765→#6fa62b or sky #6ec1f5→#2f88c9 — with a hard gloss cap across the top half, inset 0 1px 0 white top glow, a 1px darker border, and white bold text.
垂直渐变的胶囊——青柠 #b7e765→#6fa62b 或天蓝 #6ec1f5→#2f88c9——上半部分一道硬边光泽盖，inset 0 1px 0 的白色顶部内发光，1px 深色描边，配白色粗体字。
-
Starburst badges星形爆炸贴徽章 imagery defining定义特征
Spiky 12–16-point star stickers, usually yellow or blue, rotated about -10°, shouting BETA, NEW, or FREE in bold caps — the era's perpetual-beta culture made literal.
12–16 个尖角的星形贴纸，多为黄色或蓝色，旋转约 -10°，用粗体大写喊着 BETA、NEW 或 FREE——把那个时代「永远内测」的文化做成了实体贴纸。
-
Aggressively rounded corners拼命加大的圆角 geometry defining定义特征
Cards, inputs, and tabs wear 10–20px radii and buttons go full pill — sites showed off the then-new CSS3 border-radius by rounding everything it could reach.
卡片、输入框和标签页都是 10–20px 的圆角，按钮直接用全胶囊形——当年 CSS3 border-radius 刚出现，网站恨不得把它能够到的一切全都圆掉。
-
Bright friendly gradients明亮友好的渐变 color supporting辅助特征
Lime green, sky blue, and sunny orange vertical gradients on a white or very light blue-gray page; lighter at the top, deeper at the bottom, never murky or neon.
青柠绿、天蓝、阳光橙的垂直渐变，铺在白色或极浅的蓝灰色页面上；上浅下深，绝不浑浊，也不霓虹。
-
Soft fuzzy drop shadows柔和模糊的投影 depth supporting辅助特征
Diffused gray shadows (blur 8–24px, alpha 15–30%) float cards and buttons gently above the page — depth by softness, the opposite of hard offset shadows.
弥散的灰色阴影（blur 8–24px，透明度 15–30%）让卡片和按钮轻轻浮在页面上——靠「软」做出纵深，与硬偏移阴影正好相反。
-
Arial/Verdana-era typeArial/Verdana 时代的字体 typography supporting辅助特征
Neutral system sans-serifs — Arial, Helvetica, Verdana — with a frequent 1px white letterpress text-shadow under headings; lowercase wordmarks in bright blue or green.
中性的系统无衬线——Arial、Helvetica、Verdana——标题下常加 1px 白色压印 text-shadow；小写圆体 Logo 字用亮蓝或亮绿。
-
Nature infusion自然元素的融入 imagery avoid避免
Water droplets, grass, fish, bokeh, or aurora skies turn it into Frutiger Aero; chrome and brushed metal drag it back toward Y2K.
水珠、草地、鱼、散景或极光天空一出现，就变成 Frutiger Aero 了；铬色和拉丝金属则会把它拉回 Y2K。
Often confused with: Frutiger Aero最容易混淆：Frutiger Aero
Web 2.0 GlossWeb 2.0 光泽（Web 2.0 Gloss）
Frutiger AeroFrutiger Aero
This is Web 2.0 Gloss because the shine is artificial and commercial — candy gel buttons, mirror-floor product reflections, and starburst BETA badges arranged on a plain white page, with zero nature imagery.
这是 Web 2.0 光泽，因为这里的亮泽是人造的、商业的——糖果凝胶按钮、镜面地板式的产品倒影和星形 BETA 爆炸贴，摆在朴素的白色页面上，零自然意象。
It would become Frutiger Aero if the white page opened into a world — blue skies, water droplets, grass, fish, and bokeh light flooding in behind the same glossy surfaces.
如果白色页面豁然展开成一个世界——蓝天、水珠、草地、鱼和散景光斑涌到同样亮泽的表面背后——就变成 Frutiger Aero 了。
In code — optional starting points代码写法 —— 可选起点
The candy gel button: two-stop gradient + hard 50% gloss cap + white inner top glow
border: 1px solid #5f9423; border-radius: 999px; background: linear-gradient(180deg, #d9f79b 0%, #a9dd5b 48%, #8cc63f 52%, #77b02c 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 3px 8px rgba(95,140,40,.45); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.25);Mirror-floor reflection (Chromium/Safari one-liner; elsewhere clone + scaleY(-1) + gradient mask)
-webkit-box-reflect: below 2px linear-gradient(transparent 55%, rgba(0,0,0,.25));Letterpress heading on the white page
color: #3b6ea5; text-shadow: 0 1px 0 #ffffff;Style brief — paste into your agent风格 Brief —— 粘贴给你的代理
Build it in the Web 2.0 Gloss style of 2006–2012 startup sites. Canvas: clean white #ffffff to very light blue-gray #f2f6fa. Every button is a candy gel pill: vertical gradient lime #d9f79b→#77b02c or sky #6ec1f5→#2f88c9 with a hard 50% gloss cap, inset 0 1px 0 rgba(255,255,255,.85) top glow, 1px darker border, border-radius 999px, soft drop shadow 0 3px 8px at ~35% alpha; white bold label, 0 -1px 0 rgba(0,0,0,.25) text-shadow. Every elevated element gets a mirror-floor reflection: duplicate it below, scaleY(-1), fading with a gradient mask within 40–60% of its height at ~30% opacity. Corners are aggressively round (12–20px on cards, full pill on buttons). Stick one spiky yellow starburst badge in a corner, rotated -10°, reading BETA or NEW in bold caps. Depth comes only from soft fuzzy shadows, blur 8–24px. Type: Arial/Helvetica/Verdana, headings with a 1px white letterpress text-shadow. Accents: lime #8cc63f, sky #3f9be0, orange #ff9f2e. Avoid: nature imagery (water, grass, fish, bokeh — that is Frutiger Aero), chrome or metal, flat fills, hard offset shadows, dark backgrounds.
用 2006–2012 年创业网站风格的 Web 2.0 光泽来构建。画布：干净的白色 #ffffff 到极浅的蓝灰 #f2f6fa。每个按钮都是糖果凝胶胶囊：垂直渐变青柠 #d9f79b→#77b02c 或天蓝 #6ec1f5→#2f88c9，带一道 50% 位置的硬边光泽盖，inset 0 1px 0 rgba(255,255,255,.85) 的顶部内发光，1px 深色描边，border-radius 999px，柔和投影 0 3px 8px、透明度约 35%；白色粗体标签，text-shadow 为 0 -1px 0 rgba(0,0,0,.25)。每个抬升的元素都要做镜面地板倒影：在正下方复制一份，scaleY(-1)，用渐变蒙版在自身高度 40–60% 的范围内淡出，透明度约 30%。圆角要大胆地圆（卡片 12–20px，按钮全胶囊）。在一个角上贴一枚黄色星形爆炸贴，旋转 -10°，用粗体大写写着 BETA 或 NEW。纵深只来自柔和模糊的阴影，blur 8–24px。字体：Arial/Helvetica/Verdana，标题可加 1px 白色压印 text-shadow。强调色：青柠 #8cc63f、天蓝 #3f9be0、橙色 #ff9f2e。避免：自然意象（水、草、鱼、散景——那是 Frutiger Aero）、铬色或金属、扁平纯色、硬偏移阴影、深色背景。
Accessibility & misuse可访问性与误用
White bold text on the light half of a lime or yellow gradient routinely fails 4.5:1 — measure against the lightest gradient stop, deepen the stops, or switch to dark text; the signature 1px white letterpress text-shadow also eats into contrast at small sizes.
白色粗体字压在青柠或黄色渐变较亮的那一半上，常常过不了 4.5:1——要对着最亮的渐变端点实测，把端点加深，或改用深色文字；标志性的 1px 白色压印 text-shadow 在小字号下也会吃掉对比度。
Reflections, gloss caps, and starbursts are decoration: reflected clones must be aria-hidden, non-focusable, and pointer-events:none so they never create ghost tab stops, and a gloss cap must never wash across a label — badges like BETA need real text, not a shape alone.
倒影、光泽盖和星形爆炸贴都是装饰：倒影克隆必须 aria-hidden、不可聚焦、pointer-events: none，绝不制造幽灵 Tab 停靠点；光泽盖绝不能洗过标签——BETA 这类徽章需要真实文字，不能只有形状。
Badge wobble, sheen sweeps, and hover glows are ambience and must stop under prefers-reduced-motion; a soft glow by itself is not a sufficient keyboard focus indicator — pair it with a real outline.
徽章摇摆、光泽扫过和悬停发光都是氛围，必须在 prefers-reduced-motion 下停止；单靠柔和发光不足以作为键盘焦点指示器——要配一个真正的 outline。
Origin起源
The term Web 2.0 was coined by Darcy DiNucci in a 1999 magazine article and popularized by the first Web 2.0 Conference hosted by Tim O'Reilly's company in 2004; the matching visual language crystallized around 2006–2012, when CSS3 made gradients and rounded corners trivial and startups dressed their pages like Apple's product marketing, mirror-floor reflections included, while perpetual-beta culture put starburst stickers on logos from Gmail down to countless forgotten launches. The look collapsed almost overnight when the flat-design wave hit in 2012–2013.
Web 2.0 一词由 Darcy DiNucci 在 1999 年的一篇杂志文章中创造，由 Tim O'Reilly 的公司 2004 年主办的首届 Web 2.0 大会推广开来；配套的视觉语言在 2006–2012 年间成型：CSS3 让渐变和圆角唾手可得，创业公司把网页打扮得像 Apple 的产品营销图——连镜面地板倒影也一并模仿——而「永远内测」的文化把星形爆炸贴贴上了从 Gmail 到无数已被遗忘的新产品的 Logo。2012–2013 年扁平化浪潮袭来，这个风格几乎一夜之间消失。