按钮
Elegant Art Deco button with gold accents, serif font, and wide tracking
- 基础骨架
font-serif font-semibold uppercase tracking-[0.3em] border border-[#D4AF37] transition-all duration-300- 变体
- 主要、次要、轮廓
- 状态
- hover、active、disabled
装饰艺术风格组件配方
font-serif font-semibold uppercase tracking-[0.3em] border border-[#D4AF37] transition-all duration-300 bg-transparent text-[#D4AF37] border-2 border-[#D4AF37] hover:bg-[#D4AF37] hover:text-gray-900 hover:shadow-[0_0_30px_rgba(212,175,55,0.5)] active:bg-[#c9a227]卡片
Dark elegant card with gold border accents and serif typography
- 基础骨架
bg-gray-900 border border-[#D4AF37]/50 relative transition-all duration-300- 变体
- 默认、金色边框、渐变
- 状态
- hover
输入框
Dark Art Deco input with gold border and serif placeholder
- 基础骨架
w-full bg-gray-900 border border-[#D4AF37]/50 text-[#f5f5dc] font-serif tracking-wider placeholder:text-[#D4AF37]/40 focus:outline-none transition-all duration-300- 变体
- 默认、金色边框
- 状态
- focus、disabled
装饰框架
Frame with Art Deco geometric border pattern and gold accents
- 基础骨架
bg-gray-900 border-2 border-[#D4AF37] relative font-serif transition-all duration-300 overflow-hidden bg-[repeating-linear-gradient(135deg,transparent,transparent_8px,rgba(212,175,55,0.15)_8px,rgba(212,175,55,0.15)_9px)] before:content-[''] before:absolute before:top-2 before:left-2 before:w-6 before:h-6 before:border-2 before:border-2 before:border-[#D4AF37] after:content-[''] after:absolute after:bottom-2 after:right-2 after:w-6 after:h-6 after:border-2 after:border-2 after:border-[#D4AF37]- 变体
- 金色、银色、深色
- 状态
- hover
装饰分隔线
Decorative separator with Art Deco fan/sunburst motif
- 基础骨架
w-full h-8 bg-gradient-to-r from-transparent via-[#D4AF37]/40 to-transparent relative my-4 md:my-6 flex items-center justify-center overflow-hidden before:content-[''] before:absolute before:w-8 before:h-8 before:bg-[conic-gradient(from_0deg,transparent_0deg,#D4AF37_10deg,transparent_20deg,transparent_40deg,#D4AF37_50deg,transparent_60deg,transparent_80deg,#D4AF37_90deg,transparent_100deg,transparent_120deg,#D4AF37_130deg,transparent_140deg,transparent_160deg,#D4AF37_170deg,transparent_180deg,transparent_200deg,#D4AF37_210deg,transparent_220deg,transparent_240deg,#D4AF37_250deg,transparent_260deg,transparent_280deg,#D4AF37_290deg,transparent_300deg,transparent_320deg,#D4AF37_330deg,transparent_340deg,transparent_360deg)] before:rounded-full before:opacity-60- 变体
- 默认、宽、窄
- 状态
- 静态
金色徽章
Badge with gold accent and geometric Art Deco shape
- 基础骨架
inline-flex items-center justify-center font-serif uppercase tracking-[0.2em] border border-[#D4AF37] bg-gray-900 text-[#D4AF37] transition-all duration-300 [clip-path:polygon(30%_0%,70%_0%,100%_30%,100%_70%,70%_100%,30%_100%,0%_70%,0%_30%)] bg-[repeating-linear-gradient(0deg,transparent,transparent_3px,rgba(212,175,55,0.1)_3px,rgba(212,175,55,0.1)_4px)]- 变体
- 金色、银色、铜色
- 状态
- hover