返回配方目录
Skeuomorphism

拟物设计组件配方

font-bold rounded-lg border border-[#a89880] shadow-[0_3px_6px_rgba(0,0,0,0.16),0_3px_6px_rgba(0,0,0,0.23)] transition-all duration-200 ease-out bg-gradient-to-b from-[#b8a88a] to-[#8b7355] text-white hover:-translate-y-px hover:shadow-[0_6px_12px_rgba(0,0,0,0.2),0_4px_6px_rgba(0,0,0,0.18)] active:translate-y-px active:shadow-[inset_0_2px_4px_rgba(0,0,0,0.2)]
button

按钮

Realistic 3D button with gradient surface, inset shadows and tactile depth

基础骨架
font-bold rounded-lg border border-[#a89880] shadow-[0_3px_6px_rgba(0,0,0,0.16),0_3px_6px_rgba(0,0,0,0.23)] transition-all duration-200 ease-out
变体
主要、次要、轮廓
状态
hover、active、disabled
card

卡片

Textured surface card with gradient background and realistic depth shadows

基础骨架
bg-gradient-to-b from-[#e8dfd1] to-[#d4c4a8] rounded-lg border border-[#a89880] shadow-[0_3px_6px_rgba(0,0,0,0.16),0_3px_6px_rgba(0,0,0,0.23)] transition-all duration-200 ease-out
变体
默认、凸起、凹入
状态
hover
input

输入框

Realistic inset input field with textured background and depth effect

基础骨架
w-full rounded-lg border border-[#a89880] bg-[#f5efe6] shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)] font-sans text-[#3a2f22] placeholder:text-[#8b7355] focus:outline-none transition-all duration-200 ease-out
变体
默认、浮雕
状态
focus、disabled