Windows 9x Retro

Style DNA StyleSwift 0 downloads Official 2026-05-31

colors dark retro

Download

复古Windows 9x系统界面风格，经典的灰色系配色与3D立体边框

name: Windows 9x Retro
description: 复古Windows 9x系统界面风格，经典的灰色系配色与3D立体边框

Windows 9x Retro 风格

风格描述

模拟经典Windows 9x系统界面的视觉风格。采用标志性的灰色系配色、3D凸起/凹陷边框效果、无圆角设计，营造复古桌面操作系统的质感。适用于需要怀旧感或复古科技氛围的界面设计。

色彩方案

核心系统色

按钮文字: #000000 (rgb(0,0,0))
按钮面: #c0c0c0 (rgb(192,192,192)) - 标志性Windows灰色
按钮高光: #ffffff (rgb(255,255,255))
按钮阴影: #808080 (rgb(128,128,128))
按钮暗边: #000000 (rgb(0,0,0))
按钮选中: #dfdfdf (rgb(223,223,223))

窗口与文本

窗口文字: #000000
窗口背景: #ffffff
活动标题栏文字: #ffffff
活动标题栏: #000080 (rgb(0,0,128)) - 经典深蓝
信息背景: #ffffc0 (rgb(255,255,192)) - 淡黄色提示背景
高亮文字: #ffffff
高亮背景: #000080

辅助色

灰色文字: #808080
深灰文字: #404040 (rgb(64,64,64))
链接色: #0000ff (经典蓝色)
悬停背景: #dfffdf (rgb(223,223,255)) - 淡紫色悬停

排版

字体系统

字体族: MS Sans Serif, MS Reference Sans Serif, Liberation Sans, Tahoma, sans-serif
基础字号: 12px
正文字号: 14px
标题字号: 14px (加粗)
行高: 1.2

字体规则

使用系统位图字体风格（MS Sans Serif优先）
标题使用加粗而非增大字号
保持紧凑的行高(1.2)营造经典感

视觉效果

3D边框系统（核心特征）

采用多层box-shadow模拟Windows 9x的3D立体效果：

凸起按钮效果:

上边和左边: 高亮色(#fff)
下边和右边: 阴影色(#808080)和暗边(#000)

凹陷输入框效果:

上边和左边: 阴影色和暗边
下边和右边: 高亮色

分组框效果:

上边和左边: 高亮色
下边和右边: 阴影色

圆角规则

强制无圆角: border-radius: 0 !important
所有元素保持直角边框

阴影规则

不使用现代CSS阴影
通过边框颜色组合模拟立体感
最大只使用box-shadow模拟边框效果

图标处理

可使用base64编码的小型位图图标
或将SVG图标填充设为透明并用背景图替换
图标尺寸固定为16x16px

设计意图

这个风格的核心是重现Windows 95/98时代的视觉语言：

功能性优先: 不追求现代美学，而是还原那个时代的设计逻辑
物理隐喻: 3D边框模拟真实按钮的按压感
视觉一致性: 灰色系统色贯穿整个界面
紧凑布局: 较小的字号和间距，信息密度高
无装饰性圆角: 直角边框体现系统感

参考 CSS

以下为风格片段示例，选择器需根据目标页面调整：

/* 核心变量定义 */
:root {
  --color-button-face: #c0c0c0;
  --color-button-highlight: #ffffff;
  --color-button-shadow: #808080;
  --color-active-caption: #000080;
  --color-highlight: #000080;
}

/* 3D按钮效果 */
.btn {
  background: #c0c0c0;
  border: 1px solid transparent;
  border-color: #ffffff #808080 #808080 #ffffff;
  border-radius: 0;
  box-shadow: 1px 0 0 #000, 0 1px 0 #000, 1px 1px 0 #000;
}

/* 3D输入框效果 */
input[type=text] {
  background: #ffffff;
  border-color: #808080 #ffffff #ffffff #808080;
  border-radius: 0;
}

/* 标题栏效果 */
.header {
  background: #000080;
  color: #ffffff;
}

/* 选中状态 */
.selected {
  background: #000080;
  color: #ffffff;
}