按钮
Dark Victorian button with lace-inspired borders, ornate serif text and elegant hover effects
- 基础骨架
font-serif tracking-wide rounded-sm border transition-all duration-300 ease-in-out- 变体
- 主要、次要、轮廓
- 状态
- hover、active、disabled
哥特萝莉风组件配方
font-serif tracking-wide rounded-sm border transition-all duration-300 ease-in-out bg-[#4a1a4a] text-[#e5e5e5] border-[#8b1a2a]/60 shadow-[0_2px_8px_rgba(75,26,75,0.5)] hover:shadow-[0_4px_16px_rgba(139,26,42,0.5)] hover:border-[#8b1a2a] active:scale-95卡片
Dark Victorian card with ornate lace-like borders and deep purple accents
- 基础骨架
bg-[#0a0a0a]/90 rounded-sm border border-[#4a1a4a]/50 shadow-[0_4px_16px_rgba(74,26,74,0.4)] transition-all duration-300 ease-in-out- 变体
- 默认、玫瑰、银白
- 状态
- hover
输入框
Dark elegant input with ornate border styling and Victorian aesthetic
- 基础骨架
w-full rounded-sm border border-[#4a1a4a]/50 bg-[#0a0a0a]/80 text-[#e5e5e5] placeholder:text-[#4a1a4a]/60 font-serif focus:outline-none transition-all duration-300 ease-in-out- 变体
- 默认、玫瑰
- 状态
- focus、disabled
蕾丝面板
Decorative panel with lace-like border pattern and corner rose ornaments
- 基础骨架
relative bg-[#0a0a0a]/95 border-2 border-[#4a1a4a] p-6- 变体
- 默认、玫瑰
- 状态
- 静态
丝带徽章
Elegant ribbon-shaped badge with Victorian styling
- 基础骨架
inline-flex items-center px-4 py-1 bg-[#4a1a4a] text-[#e5e5e5] font-serif text-sm relative- 变体
- 默认、玫瑰、银白
- 状态
- 静态
玫瑰花结徽章
Circular rosette badge with scalloped edges
- 基础骨架
inline-flex items-center justify-center w-16 h-16 rounded-full bg-[#8b1a2a] text-[#e5e5e5] font-serif font-bold shadow-[0_0_0_4px_#4a1a4a,0_0_0_6px_#8b1a2a]- 变体
- 默认
- 状态
- 静态
念珠进度条
Progress indicator styled as a string of rosary beads
- 基础骨架
flex items-center gap-2- 变体
- 默认
- 状态
- 静态
蕾丝分隔线
Decorative horizontal divider with lace pattern
- 基础骨架
w-full h-px bg-gradient-to-r from-transparent via-[#4a1a4a] to-transparent relative- 变体
- 默认、玫瑰
- 状态
- 静态
华丽下拉菜单
Victorian-styled dropdown menu with decorative borders
- 基础骨架
relative bg-[#0a0a0a] border border-[#4a1a4a] shadow-[0_4px_16px_rgba(74,26,74,0.4)]- 变体
- 默认
- 状态
- hover