按钮
RPG menu button with beveled borders, gradient background and inset shadow depth
- 基础骨架
font-bold tracking-wide rounded-md border-2 transition-all duration-200- 变体
- 主要、金色、轮廓
- 状态
- hover、active、disabled
日式RPG组件配方
font-bold tracking-wide rounded-md border-2 transition-all duration-200 bg-gradient-to-b from-blue-700 to-blue-900 text-[#f0f9ff] border-blue-500 shadow-[inset_0_1px_0_rgba(255,255,255,0.2),0_2px_4px_rgba(0,0,0,0.5)] hover:brightness-110 hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.3),0_4px_8px_rgba(0,0,0,0.4)] active:shadow-[inset_0_2px_4px_rgba(0,0,0,0.4)]卡片
RPG menu panel with double borders, corner ornaments and gradient background
- 基础骨架
bg-gradient-to-b from-slate-800 to-slate-900 border-2 border-blue-700 rounded-md ring-1 ring-blue-400/20 transition-all duration-200 relative- 变体
- 默认、金色、状态面板
- 状态
- hover
输入框
RPG menu input with beveled inset shadow and blue border styling
- 基础骨架
w-full bg-slate-900 border-2 border-blue-700 rounded-md text-[#f0f9ff] placeholder:text-blue-300/30 focus:outline-none shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)] transition-all duration-200- 变体
- 默认、金色
- 状态
- focus、disabled
状态窗口
RPG status window with ornate double-border and gradient background
- 基础骨架
bg-gradient-to-b from-slate-800 to-slate-900 border-2 border-blue-600 rounded-md ring-2 ring-blue-400/30 ring-offset-2 ring-offset-slate-900 transition-all duration-200 relative- 变体
- 默认、深色、金色
- 状态
- hover
菜单列表
RPG-style menu list container with beveled border
- 基础骨架
bg-gradient-to-b from-slate-800 to-slate-900 border-2 border-blue-700 rounded-md text-[#f0f9ff] divide-y divide-blue-700/40 transition-all duration-200- 变体
- 默认、紧凑、宽
- 状态
- hover
金色边框
Ornate golden frame for important content with metallic gradient border
- 基础骨架
bg-gradient-to-b from-slate-800 to-slate-900 rounded-md relative transition-all duration-200- 变体
- 金色、银色、铜色
- 状态
- hover