style: add rounded corners to square Avatar (#1156)

packages/semi-foundation/avatar/avatar.scss

@@ -43,6 +43,7 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
     &-extra-extra-small {
         width: $width-avatar_extra_extra_small;
         height: $width-avatar_extra_extra_small;
+        border-radius: $radius-avatar_extra_extra_small;
 
         .#{$module}-content {
             transform-origin: center;
@@ -58,6 +59,7 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
     &-extra-small {
         width: $width-avatar_extra_small;
         height: $width-avatar_extra_small;
+        border-radius: $radius-avatar_extra_small;
 
         .#{$module}-content {
             transform-origin: center;
@@ -73,6 +75,7 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
     &-small {
         width: $width-avatar_small;
         height: $width-avatar_small;
+        border-radius: $radius-avatar_small;
 
         .#{$module}-label {
             @include font-size-small;
@@ -82,6 +85,7 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
     &-default {
         width: $width-avatar_default;
         height: $width-avatar_default;
+        border-radius: $radius-avatar_default;
 
         .#{$module}-label {
             @include font-size-header-5;
@@ -91,6 +95,7 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
     &-medium {
         width: $width-avatar_medium;
         height: $width-avatar_medium;
+        border-radius: $radius-avatar_medium;
 
         .#{$module}-label {
             @include font-size-header-4;
@@ -100,6 +105,7 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
     &-large {
         width: $width-avatar_large;
         height: $width-avatar_large;
+        border-radius: $radius-avatar_large;
 
         .#{$module}-label {
             @include font-size-header-1;
@@ -109,6 +115,7 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
     &-extra-large {
         width: $width-avatar_extra_large;
         height: $width-avatar_extra_large;
+        border-radius: $radius-avatar_extra_large;
 
         .#{$module}-label {
             font-size: $font-avatar_extra_large-size;

packages/semi-foundation/avatar/variables.scss

@@ -45,4 +45,13 @@ $spacing-avatar_extra_small-marginLeft: -10px; // 头像左侧外边距 - 超小
 $width-avatar_extra_extra_small-border: 1px; // 头像描边尺寸 - 极小
 $spacing-avatar_extra_extra_small-marginLeft: -4px; // 头像左侧外边距 - 极小
 
-$width-avatar-outline: 2px; //头像聚焦轮廓宽度
+$width-avatar-outline: 2px; //头像聚焦轮廓宽度
+
+// radius
+$radius-avatar_extra_extra_small: 3px; // 极小尺寸头像的圆角
+$radius-avatar_extra_small: 3px; // 超小尺寸头像的圆角
+$radius-avatar_small: 3px; // 小尺寸头像的圆角
+$radius-avatar_default: 3px; // 默认尺寸头像的圆角
+$radius-avatar_medium: 3px; // 中尺寸头像的圆角
+$radius-avatar_large: 6px; // 大尺寸头像的圆角
+$radius-avatar_extra_large: 12px; // 超大尺寸头像的圆角