shadow-default

.shadow-default{
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

shadow-colorhunt

display: flex;
box-sizing: border-box;
color: #666;
padding: 30rpx;
margin: 30rpx 30rpx 0;
background: #fff;
border-radius: 10rpx;
box-shadow: 0 10rpx 40rpx -10rpx rgba(0,64,128,.2);

shadow-coolhue

.shadow-coolhue{
    box-shadow: 0rpx 0rpx 51rpx 0rpx rgba(0, 0, 0, 0.08), 0px 6rpx 18rpx 0px rgba(0, 0, 0, 0.05);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(0rpx);
}
.shadow-coolhue:hover{
    box-shadow: 0rpx 0rpx 114rpx 0rpx rgba(0, 0, 0, 0.08), 0px 30rpx 25rpx 0px rgba(0, 0, 0, 0.05);
    transform: translateY(-5rpx);
}

shadow-deepl

.shadow-deepl {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: 100%;
    color: #333;
    padding: 42px 30px 100px 70px;
    box-sizing: border-box;
    text-align: center;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0px 32px 40px rgba(0,0,0,.08);
    z-index: 2;
}

ANTD 常用阴影设计表

第一层：
**

第二层：**

第三层：

阴影是模拟的真实世界的反馈，Ant Design 为了更符合真实阴影，在 4.0 中采用了三层阴影的表达方式，让阴影更柔和，更符合真实状态。