shadow-default

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

Screenshot_2020-07-08-09-59-00-140_com.tencent.mm.jpg

shadow-colorhunt

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

Screenshot_2020-06-17-12-32-23-524_com.tencent.mm.jpg

shadow-coolhue

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

image.png

shadow-deepl

  1. .shadow-deepl {
  2. position: relative;
  3. display: inline-block;
  4. flex: 0 0 auto;
  5. width: 100%;
  6. color: #333;
  7. padding: 42px 30px 100px 70px;
  8. box-sizing: border-box;
  9. text-align: center;
  10. background-color: #fff;
  11. border-radius: 5px;
  12. box-shadow: 0px 32px 40px rgba(0,0,0,.08);
  13. z-index: 2;
  14. }

image.png

ANTD 常用阴影设计表

第一层:
**

阴影类型 阴影颜色(rgba) 方向(X, Y) 模糊度(Blur) 扩展值(Spread)
@shadow-1-up rgba(0, 0, 0, 0.16) 0px, -1px 2px -2px
rgba(0, 0, 0, 0.12) 0px, -3px 6px 0px
rgba(0, 0, 0, 0.09) 0px, -5px 12px 4px
@shadow-1-down rgba(0, 0, 0, 0.16) 0px, 1px 2px -2px
rgba(0, 0, 0, 0.12) 0px, 3px 6px 0px
rgba(0, 0, 0, 0.09) 0px, 5px 12px 4px
@shadow-1-left rgba(0, 0, 0, 0.16) -1px, 0px 2px -2px
rgba(0, 0, 0, 0.12) -3px, 0px 6px 0px
rgba(0, 0, 0, 0.09) -5px, 0px 12px 4px
@shadow-1-right rgba(0, 0, 0, 0.16) 1px, 0px 2px -2px
rgba(0, 0, 0, 0.12) 3px, 0px 6px 0px
rgba(0, 0, 0, 0.09) 5px, 0px 12px 4px


第二层:**

阴影类型 阴影颜色(rgba) 方向(X, Y) 模糊度(Blur) 扩展值(Spread)
@shadow-2-up rgba(0, 0, 0, 0.12) 0px, -3px 6px -4px
rgba(0, 0, 0, 0.08) 0px, -6px 16px 0px
rgba(0, 0, 0, 0.05) 0px, -9px 28px 8px
@shadow-2-down rgba(0, 0, 0, 0.12) 0px, 3px 6px -4px
rgba(0, 0, 0, 0.08) 0px, 6px 16px 0px
rgba(0, 0, 0, 0.05) 0px, 9px 28px 8px
@shadow-2-left rgba(0, 0, 0, 0.12) -3px, 0px 6px -4px
rgba(0, 0, 0, 0.08) -6px, 0px 16px 0px
rgba(0, 0, 0, 0.05) -9px, 0px 28px 8px
@shadow-2-right rgba(0, 0, 0, 0.12) 3px, 0px 6px -4px
rgba(0, 0, 0, 0.08) 6px, 0px 16px 0px
rgba(0, 0, 0, 0.05) 9px, 0px 28px 8px


第三层:

阴影类型 阴影颜色(rgba) 方向(X, Y) 模糊度(Blur) 扩展值(Spread)
@shadow-3-up rgba(0, 0, 0, 0.08) 0px, -6px 16px -8px
rgba(0, 0, 0, 0.05) 0px, -9px 28px 0px
rgba(0, 0, 0, 0.03) 0px, -12px 48px 16px
@shadow-3-down rgba(0, 0, 0, 0.08) 0px, 6px 16px -8px
rgba(0, 0, 0, 0.05) 0px, 9px 28px 0px
rgba(0, 0, 0, 0.03) 0px, 12px 48px 16px
@shadow-3-left rgba(0, 0, 0, 0.08) -6px, 0px 16px -8px
rgba(0, 0, 0, 0.05) -9px, 0px 28px 0px
rgba(0, 0, 0, 0.03) -12px, 0px 48px 16px
@shadow-3-right rgba(0, 0, 0, 0.08) 6px, 0px 16px -8px
rgba(0, 0, 0, 0.05) 9px, 0px 28px 0px
rgba(0, 0, 0, 0.03) 12px, 0px 48px 16px

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

常用阴影效果 - 图5