diff --git a/src/dropdown-menu/index.less b/src/dropdown-menu/index.less
index 7dd11cb71..19353d66e 100644
--- a/src/dropdown-menu/index.less
+++ b/src/dropdown-menu/index.less
@@ -14,7 +14,7 @@
     min-width: 0; // hack for flex ellipsis
 
     &:active {
-      opacity: .7;
+      opacity: @active-opacity;
     }
 
     &--disabled {
diff --git a/src/popup/index.less b/src/popup/index.less
index b34a79e98..499866752 100644
--- a/src/popup/index.less
+++ b/src/popup/index.less
@@ -95,7 +95,7 @@
       font-size: @popup-close-icon-size;
 
       &:active {
-        opacity: .6;
+        opacity: @active-opacity;
       }
 
       &--top-left {
diff --git a/src/search/index.less b/src/search/index.less
index 9b91b1392..b1e109c1b 100644
--- a/src/search/index.less
+++ b/src/search/index.less
@@ -11,7 +11,7 @@
     flex: 1;
     padding-left: @padding-xs;
     background-color: @search-background-color;
-    border-radius: 2px;
+    border-radius: @border-radius-sm;
 
     &--round {
       border-radius: @search-input-height / 2;
diff --git a/src/sku/index.less b/src/sku/index.less
index 5faf0b682..0a4969617 100644
--- a/src/sku/index.less
+++ b/src/sku/index.less
@@ -35,7 +35,7 @@
       margin: @padding-sm 0;
       overflow: hidden;
       background: @background-color;
-      border-radius: 4px;
+      border-radius: @border-radius-base;
 
       img {
         position: absolute;
@@ -141,7 +141,7 @@
       font-size: 13px;
       line-height: 16px;
       vertical-align: middle;
-      border-radius: 4px;
+      border-radius: @border-radius-base;
 
       &::before {
         position: absolute;
@@ -159,7 +159,7 @@
         height: 24px;
         margin: 4px 0 4px 4px;
         object-fit: cover;
-        border-radius: 2px;
+        border-radius: @border-radius-sm;
       }
 
       &-name {
@@ -255,7 +255,7 @@
       height: 64px;
       margin-right: @padding-xs;
       background: @sku-item-background-color;
-      border-radius: 2px;
+      border-radius: @border-radius-sm;
 
       img {
         width: 100%;
diff --git a/src/style/var.less b/src/style/var.less
index 9c052d210..bc6552ddf 100644
--- a/src/style/var.less
+++ b/src/style/var.less
@@ -15,6 +15,8 @@
 // Component Colors
 @text-color: #323233;
 @active-color: #f2f3f5;
+@active-opacity: .7;
+@disabled-opacity: .5;
 @background-color: #f8f8f8;
 @background-color-light: #fafafa;
 
@@ -40,6 +42,8 @@
 // Border
 @border-color: #ebedf0;
 @border-width-base: 1px;
+@border-radius-base: 4px;
+@border-radius-sm: 2px;
 
 // ActionSheet
 @action-sheet-max-height: 90%;
@@ -107,11 +111,11 @@
 @button-warning-color: @white;
 @button-warning-background-color: @orange;
 @button-warning-border-color: @orange;
-@button-border-width: 1px;
-@button-border-radius: 2px;
+@button-border-width: @border-width-base;
+@button-border-radius: @border-radius-sm;
 @button-round-border-radius: 10em;
 @button-plain-background-color: @white;
-@button-disabled-opacity: .5;
+@button-disabled-opacity: @disabled-opacity;
 
 // Card
 @card-padding: @padding-xs @padding-md;
@@ -207,7 +211,7 @@
 @coupon-content-padding: @padding-lg 0 0 @padding-md;
 @coupon-background-color: @white;
 @coupon-active-background-color: @active-color;
-@coupon-border-radius: 4px;
+@coupon-border-radius: @border-radius-base;
 @coupon-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
 @coupon-head-width: 85px;
 @coupon-amount-color: @red;
@@ -235,7 +239,7 @@
 @dialog-width: 85%;
 @dialog-font-size: @font-size-lg;
 @dialog-transition: @animation-duration-base;
-@dialog-border-radius: 4px;
+@dialog-border-radius: @border-radius-base;
 @dialog-background-color: @white;
 @dialog-header-font-weight: @font-weight-bold;
 @dialog-header-line-height: 24px;
@@ -322,7 +326,7 @@
 @info-padding: 0 3px;
 @info-font-size: @font-size-sm;
 @info-font-weight: @font-weight-bold;
-@info-border-width: 1px;
+@info-border-width: @border-width-base;
 @info-background-color: @red;
 @info-dot-color: @red;
 @info-dot-size: 8px;
@@ -409,7 +413,7 @@
 @pagination-item-disabled-background-color: @background-color;
 @pagination-background-color: @white;
 @pagination-desc-color: @gray-darker;
-@pagination-disabled-opacity: 0.6;
+@pagination-disabled-opacity: @disabled-opacity;
 
 // Panel
 @panel-background-color: @white;
@@ -515,7 +519,7 @@
 // Slider
 @slider-active-background-color: @blue;
 @slider-inactive-background-color: @gray-light;
-@slider-disabled-opacity: .3;
+@slider-disabled-opacity: @disabled-opacity;
 @slider-button-width: 20px;
 @slider-button-height: 20px;
 @slider-button-border-radius: 50%;
@@ -552,7 +556,7 @@
 @stepper-input-text-color: @text-color;
 @stepper-input-disabled-text-color: @gray;
 @stepper-input-disabled-background-color: @active-color;
-@stepper-border-radius: 4px;
+@stepper-border-radius: @border-radius-base;
 
 // SubmitBar
 @submit-bar-height: 50px;
@@ -589,8 +593,8 @@
 @switch-background-color: @white;
 @switch-on-background-color: @blue;
 @switch-transition-duration: @animation-duration-base;
-@switch-disabled-opacity: .4;
-@switch-border: 1px solid rgba(0, 0, 0, .1);
+@switch-disabled-opacity: @disabled-opacity;
+@switch-border: @border-width-base solid rgba(0, 0, 0, .1);
 
 // SwitchCell
 @switch-cell-padding-top: @cell-vertical-padding - 1px;
@@ -644,7 +648,7 @@
 @toast-font-size: @font-size-md;
 @toast-text-color: @white;
 @toast-line-height: 20px;
-@toast-border-radius: 4px;
+@toast-border-radius: @border-radius-base;
 @toast-background-color: rgba(@text-color, .88);
 @toast-icon-size: 40px;
 @toast-text-min-width: 96px;
diff --git a/src/tabs/index.less b/src/tabs/index.less
index 856e849f3..661af397d 100644
--- a/src/tabs/index.less
+++ b/src/tabs/index.less
@@ -79,7 +79,7 @@
       height: @tabs-card-height;
       margin: 0 @padding-md;
       border: @border-width-base solid @tabs-default-color;
-      border-radius: 2px;
+      border-radius: @border-radius-sm;
 
       .van-tab {
         color: @tabs-default-color;