diff --git a/style/web/components/switch/_index.less b/style/web/components/switch/_index.less
index 94cf883d18..9778df1dc1 100644
--- a/style/web/components/switch/_index.less
+++ b/style/web/components/switch/_index.less
@@ -271,3 +271,95 @@
     }
   }
 }
+
+// shape: square - 圆角矩形外观
+.@{prefix}-switch--shape-square {
+  border-radius: @switch-shape-square-border-radius;
+
+  &.@{prefix}-size-l,
+  &.@{prefix}-size-s {
+    border-radius: @switch-shape-square-border-radius;
+  }
+
+  .@{prefix}-switch__handle {
+    border-radius: @switch-shape-square-border-radius;
+
+    &::before {
+      border-radius: @switch-shape-square-border-radius;
+    }
+  }
+}
+
+// shape: line - 线性外观（细轨道 + 圆形 handle 浮于轨道之上）
+.@{prefix}-switch--shape-line {
+  background-color: transparent;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 0;
+    right: 0;
+    height: @switch-line-track-height-default;
+    border-radius: @border-radius-round;
+    background-color: @switch-unchecked-bg-color;
+    transform: translateY(-50%);
+    transition: @switch-transition;
+  }
+
+  &:hover {
+    background-color: transparent;
+
+    &::before {
+      background-color: @switch-unchecked-bg-color-hover;
+    }
+  }
+
+  &.@{prefix}-size-l::before {
+    height: @switch-line-track-height-l;
+  }
+
+  &.@{prefix}-size-s::before {
+    height: @switch-line-track-height-s;
+  }
+
+  &.@{prefix}-is-checked {
+    background-color: transparent;
+
+    &::before {
+      background-color: @switch-checked-bg-color;
+    }
+
+    &:hover {
+      background-color: transparent;
+
+      &::before {
+        background-color: @switch-checked-bg-color-hover;
+      }
+    }
+  }
+
+  &.@{prefix}-is-loading {
+    background-color: transparent;
+
+    &::before {
+      background-color: @switch-unchecked-bg-color-loading;
+    }
+
+    &.@{prefix}-is-checked::before {
+      background-color: @switch-checked-bg-color-loading;
+    }
+  }
+
+  &.@{prefix}-is-disabled {
+    background-color: transparent;
+
+    &::before {
+      background-color: @switch-unchecked-bg-color-disabled;
+    }
+
+    &.@{prefix}-is-checked::before {
+      background-color: @switch-checked-bg-color-disabled;
+    }
+  }
+}
diff --git a/style/web/components/switch/_var.less b/style/web/components/switch/_var.less
index 34a038da8b..90fb769707 100644
--- a/style/web/components/switch/_var.less
+++ b/style/web/components/switch/_var.less
@@ -66,6 +66,14 @@
 @switch-content-margin-left-s: calc(@switch-min-width-s / 2 + 2px);
 @switch-content-margin-right-s: @comp-margin-xxs;
 
+// 形状 - square 圆角矩形
+@switch-shape-square-border-radius: @border-radius-medium;
+
+// 形状 - line 线性外观
+@switch-line-track-height-l: calc(@switch-height-l / 3);
+@switch-line-track-height-default: calc(@switch-height-default / 3);
+@switch-line-track-height-s: calc(@switch-height-s / 3);
+
 // 动画
 @switch-transition: all @anim-duration-base @anim-time-fn-easing;
 @switch-handle-transition: all @anim-duration-base @anim-time-fn-easing;