按钮
Bold comic button with thick black outlines, bright colors and action effects
- 基础骨架
font-black uppercase tracking-wide border-4 border-[#1a1a1a] rounded-lg transition-all duration-150- 变体
- 主要、次要、轮廓
- 状态
- hover、active、disabled
漫画风格组件配方
font-black uppercase tracking-wide border-4 border-[#1a1a1a] rounded-lg transition-all duration-150 bg-[#ef4444] text-white shadow-[4px_4px_0px_0px_rgba(26,26,26,1)] md:shadow-[6px_6px_0px_0px_rgba(26,26,26,1)] hover:shadow-[2px_2px_0px_0px_rgba(26,26,26,1)] hover:translate-x-[2px] hover:translate-y-[2px] active:translate-x-[4px] active:translate-y-[4px] active:shadow-none卡片
Comic panel card with thick black borders, offset shadow and bright background
- 基础骨架
bg-[#fffef0] border-4 border-[#1a1a1a] rounded-lg transition-all duration-150- 变体
- 默认、动作、高亮
- 状态
- hover
输入框
Comic-style input with thick borders and bold typography
- 基础骨架
w-full border-4 border-[#1a1a1a] rounded-lg bg-[#fffef0] font-bold text-[#1a1a1a] placeholder:text-[#4a4a4a] focus:outline-none transition-all duration-150- 变体
- 默认、彩色
- 状态
- focus、disabled
对话气泡
Comic speech bubble container with thick borders and tail
- 基础骨架
bg-[#fffef0] border-4 border-[#1a1a1a] rounded-2xl p-4 md:p-6 relative font-bold transition-all duration-150- 变体
- 对话、思考、喊叫
- 状态
- hover
动作面板
Panel with comic action lines background effect
- 基础骨架
bg-[#fffef0] border-4 border-[#1a1a1a] rounded-lg relative overflow-hidden bg-[repeating-conic-gradient(#fffef0_0deg,#fffef0_5deg,rgba(26,26,26,0.03)_5deg,rgba(26,26,26,0.03)_10deg)] transition-all duration-150- 变体
- 默认、强烈、柔和
- 状态
- hover
半调叠加
Container with halftone dot pattern overlay effect
- 基础骨架
bg-[#fffef0] border-4 border-[#1a1a1a] rounded-lg p-4 md:p-6 relative overflow-hidden bg-[radial-gradient(circle_1.5px,rgba(26,26,26,0.12)_0%,transparent_100%)] bg-[size:8px_8px] transition-all duration-150- 变体
- 默认、密集、稀疏
- 状态
- hover