diff --git a/style/components/card.less b/style/components/card.less
index 9dda4efd72..cc6735b1a9 100644
--- a/style/components/card.less
+++ b/style/components/card.less
@@ -10,7 +10,8 @@
   transition: all .2s;
 
   &:hover {
-    box-shadow: 0 1px 6px rgba(100, 100, 100, .2);
+    box-shadow: @box-shadow-base;
+    border-color: #eee;
   }
 
   &-bordered {
diff --git a/style/components/message.less b/style/components/message.less
index 424d7ef9e5..b008764704 100644
--- a/style/components/message.less
+++ b/style/components/message.less
@@ -21,7 +21,7 @@
     padding: 8px 16px;
     border-radius: @border-radius-base;
     border: 1px solid @border-color-base;
-    box-shadow: @box-shadow-base;
+    box-shadow: @shadow-2;
     background: #fff;
     display: block;
   }
diff --git a/style/components/notification.less b/style/components/notification.less
index 046cc959ad..e704308722 100644
--- a/style/components/notification.less
+++ b/style/components/notification.less
@@ -15,7 +15,7 @@
   &-notice {
     padding: @notice-padding;
     border-radius: @border-radius-base;
-    box-shadow: @box-shadow-base;
+    box-shadow: @shadow-2;
     border: 1px solid @border-color-base;
     background: @body-background;
     line-height: 1.5;
diff --git a/style/components/table.less b/style/components/table.less
index b8dedfb0ed..4780a1115a 100644
--- a/style/components/table.less
+++ b/style/components/table.less
@@ -379,7 +379,7 @@
 
   &-fixed-left {
     left: 0;
-    box-shadow: 4px 0 4px rgba(0, 0, 0, 0.08);
+    box-shadow: @shadow-1-right;
     border-radius: @border-radius-base 0 0 0;
     & .@{table-prefix-cls}-body-inner {
       margin-right: -20px;
@@ -388,7 +388,7 @@
 
   &-fixed-right {
     right: 0;
-    box-shadow: -4px 0 4px rgba(0, 0, 0, 0.08);
+    box-shadow: @shadow-1-left;
     border-radius: 0 @border-radius-base 0 0;
   }
 
diff --git a/style/themes/default/custom.less b/style/themes/default/custom.less
index 992ff3087c..c50d25d632 100644
--- a/style/themes/default/custom.less
+++ b/style/themes/default/custom.less
@@ -49,9 +49,17 @@
 
 // Border color
 @border-color-base      : #d9d9d9;        // base border outline a component
-@box-shadow-base        : 0 1px 4px rgba(100, 100, 100, .2);
 @border-color-split     : #e9e9e9;        // split border inside a component
 
+// Shadow
+@shadow-color           : rgba(100, 100, 100, .2);
+@box-shadow-base        : @shadow-1-down;
+@shadow-1-up            : 0 -1px 6px @shadow-color;
+@shadow-1-down          : 0 1px 6px @shadow-color;
+@shadow-1-left          : -1px 0 6px @shadow-color;
+@shadow-1-right         : 1px 0 6px @shadow-color;
+@shadow-2               : 0 1px 8px @shadow-color;
+
 // Buttons
 @btn-font-weight        : 500;