---
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时代的视觉语言：

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

## 参考 CSS

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

```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;
}
```

## 适用场景

- 复古/怀旧主题网站
- 需要强调"系统感"的管理后台
- 游戏相关网站（特别是怀旧游戏）
- 创意实验性项目
- 对比现代扁平设计的特殊需求

## 注意事项

1. 此风格与现代Web设计趋势差异较大，需谨慎使用
2. 3D边框效果通过多层box-shadow实现，注意性能
3. 字体依赖系统字体，需提供降级方案
4. 强制无圆角可能与某些现代组件冲突，需提高选择器优先级
5. 一定不要杂乱。