本页出处
设计风格资料库
内容来自 luckymaomi 的 UI 风格库(复刻版),以 MIT 许可 提供。本站镜像收录,仅作学习参考;这一页的原始地址是 原站页面。
← 回到导览访问原站仓库

阴影

soft

柔和小

box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
soft

柔和中

box-shadow: 0 4px 12px rgba(0,0,0,0.08);
soft

柔和大

box-shadow: 0 8px 30px rgba(0,0,0,0.08);
soft

柔和超大

box-shadow: 0 20px 60px rgba(0,0,0,0.1);
medium

中等小

box-shadow: 0 2px 8px rgba(0,0,0,0.15);
medium

中等

box-shadow: 0 4px 16px rgba(0,0,0,0.15);
medium

中等大

box-shadow: 0 10px 40px rgba(0,0,0,0.15);
hard

硬朗小

box-shadow: 2px 2px 0 rgba(0,0,0,1);
hard

硬朗中

box-shadow: 4px 4px 0 rgba(0,0,0,1);
hard

硬朗大

box-shadow: 8px 8px 0 rgba(0,0,0,1);
hard

硬朗彩色

box-shadow: 4px 4px 0 #5e6ad2;
colored

粉色光晕

box-shadow: 0 8px 30px rgba(255,0,110,0.35);
colored

紫色光晕

box-shadow: 0 8px 30px rgba(131,56,236,0.35);
colored

蓝色光晕

box-shadow: 0 8px 30px rgba(58,134,255,0.35);
colored

绿色光晕

box-shadow: 0 8px 30px rgba(6,214,160,0.35);
colored

橙色光晕

box-shadow: 0 8px 30px rgba(251,86,7,0.35);
glow

霓虹青

box-shadow: 0 0 15px rgba(0,255,255,0.4), 0 0 30px rgba(0,255,255,0.2);
glow

霓虹品红

box-shadow: 0 0 15px rgba(255,0,255,0.4), 0 0 30px rgba(255,0,255,0.2);
glow

白色辉光

box-shadow: 0 0 20px rgba(255,255,255,0.25), 0 0 40px rgba(255,255,255,0.1);
glow

金色辉光

box-shadow: 0 0 20px rgba(255,215,0,0.3), 0 0 40px rgba(255,215,0,0.15);
inner

内阴影小

box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
inner

内阴影中

box-shadow: inset 0 4px 8px rgba(0,0,0,0.15);
inner

新拟态内凹

box-shadow: inset 5px 5px 10px rgba(0,0,0,0.08), inset -5px -5px 10px rgba(255,255,255,0.8);
layered

真实分层

box-shadow: 0 1px 1px rgba(0,0,0,0.08), 0 2px 2px rgba(0,0,0,0.06), 0 4px 4px rgba(0,0,0,0.04), 0 8px 8px rgba(0,0,0,0.02);
layered

Material 抬升

box-shadow: 0 3px 5px rgba(0,0,0,0.1), 0 6px 20px rgba(0,0,0,0.08);
layered

梦幻悬浮

box-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 8px 16px rgba(0,0,0,0.06), 0 24px 48px rgba(0,0,0,0.08);
layered

新拟态凸起

box-shadow: 8px 8px 16px rgba(0,0,0,0.08), -8px -8px 16px rgba(255,255,255,0.8);
layered

平滑·低

box-shadow: 0 1px 1.5px rgba(28,25,60,0.07), 0 2.7px 4px rgba(28,25,60,0.05), 0 6.5px 10px rgba(28,25,60,0.04), 0 12px 18px rgba(28,25,60,0.03);
layered

平滑·中

box-shadow: 0 1px 1.5px rgba(28,25,60,0.06), 0 3px 4px rgba(28,25,60,0.05), 0 7px 10px rgba(28,25,60,0.04), 0 14px 20px rgba(28,25,60,0.035), 0 24px 36px rgba(28,25,60,0.03);
layered

平滑·高

box-shadow: 0 1.4px 2px rgba(28,25,60,0.06), 0 3.5px 5px rgba(28,25,60,0.05), 0 8px 11px rgba(28,25,60,0.045), 0 15px 22px rgba(28,25,60,0.04), 0 28px 40px rgba(28,25,60,0.035), 0 50px 70px rgba(28,25,60,0.03);
elevation

层级 1

box-shadow: 0 2px 1px -1px rgba(0,0,0,0.2), 0 1px 1px 0 rgba(0,0,0,0.14), 0 1px 3px 0 rgba(0,0,0,0.12);
elevation

层级 2

box-shadow: 0 3px 1px -2px rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12);
elevation

层级 3

box-shadow: 0 3px 3px -2px rgba(0,0,0,0.2), 0 3px 4px 0 rgba(0,0,0,0.14), 0 1px 8px 0 rgba(0,0,0,0.12);
elevation

层级 4

box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12);
elevation

层级 5

box-shadow: 0 3px 5px -1px rgba(0,0,0,0.2), 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12);
colored

平滑·蓝

box-shadow: 0 2px 4px rgba(37,99,235,0.1), 0 6px 12px rgba(37,99,235,0.12), 0 12px 24px rgba(37,99,235,0.14);
colored

平滑·紫

box-shadow: 0 2px 4px rgba(139,92,246,0.1), 0 6px 12px rgba(139,92,246,0.12), 0 12px 24px rgba(139,92,246,0.14);