哈哈，这个问题我太熟了！之前做胶囊按钮的时候也踩过这个坑——当你把CornerRadius设得超过控件最小边的一半时，系统为了填满整个边角，会自动把圆角拉伸成椭圆，而不是保持正圆形。要解决这个问题，核心逻辑其实很简单：让圆角半径始终等于按钮宽高中更小那个值的一半，这样不管按钮是宽扁的还是高瘦的，两端都会是完美的半圆。下面给你分几个主流技术栈说说具体怎么实现：

WPF/UWP #

这里需要借助多值绑定和转换器来动态计算最小边的一半：

首先写一个转换器类，用来计算圆角半径：

public class CapsuleCornerRadiusConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        if (values.Length >= 2 && values[0] is double width && values[1] is double height)
        {
            // 取宽高中的最小值除以2，作为圆角半径
            double radius = Math.Min(width, height) / 2;
            return new CornerRadius(radius);
        }
        return new CornerRadius(0);
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

然后在XAML中使用多值绑定，把按钮的实际宽高传给转换器：

<!-- 先在资源中声明转换器 -->
<Window.Resources>
    <local:CapsuleCornerRadiusConverter x:Key="CapsuleConverter"/>
</Window.Resources>

<!-- 胶囊按钮 -->
<Button Content="Capsule Button" Padding="16 8">
    <Button.CornerRadius>
        <MultiBinding Converter="{StaticResource CapsuleConverter}">
            <Binding Path="ActualWidth" RelativeSource="{RelativeSource Self}"/>
            <Binding Path="ActualHeight" RelativeSource="{RelativeSource Self}"/>
        </MultiBinding>
    </Button.CornerRadius>
</Button>

Android（Material Design） #

如果你用的是MaterialButton，可以通过代码动态计算，或者用DataBinding绑定：

方式1：代码动态设置 #

val capsuleBtn = findViewById<MaterialButton>(R.id.capsule_btn)
capsuleBtn.viewTreeObserver.addOnGlobalLayoutListener(object : ViewTreeObserver.OnGlobalLayoutListener {
    override fun onGlobalLayout() {
        // 布局完成后获取实际宽高，计算圆角
        val radius = min(capsuleBtn.width, capsuleBtn.height) / 2f
        capsuleBtn.cornerRadius = radius
        // 移除监听避免重复计算
        capsuleBtn.viewTreeObserver.removeOnGlobalLayoutListener(this)
    }
})

方式2：DataBinding绑定 #

先确保开启了DataBinding，然后在布局中直接绑定计算：

<com.google.android.material.button.MaterialButton
    android:id="@+id/capsule_btn"
    android:layout_width="wrap_content"
    android:layout_height="48dp"
    android:text="Capsule Button"
    app:cornerRadius="@{Math.min(capsule_btn.width, capsule_btn.height)/2f}"
    />

Flutter #

Flutter里可以用LayoutBuilder获取控件的约束，动态计算圆角半径：

LayoutBuilder(
  builder: (context, constraints) {
    // 从约束中获取最大宽高，取最小值除以2
    double radius = min(constraints.maxWidth, constraints.maxHeight) / 2;
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(radius),
      ),
      child: Text(
        "Capsule Button",
        style: TextStyle(color: Colors.white),
      ),
    );
  },
)

Web前端（CSS） #

这应该是最简单的！直接用足够大的圆角值就行——当border-radius的值大于控件最小边的一半时，浏览器会自动渲染成胶囊形状，而且圆角是正圆形的：

.capsule-button {
  padding: 8px 24px;
  background-color: #2196F3;
  color: white;
  border: none;
  border-radius: 9999px; /* 这个值足够大，能适配绝大多数按钮尺寸 */
  cursor: pointer;
}

如果你想要更精确的动态计算，也可以用CSS变量：

.capsule-button {
  --btn-height: 40px;
  height: var(--btn-height);
  width: auto;
  border-radius: calc(min(100%, var(--btn-height)) / 2);
}

不管用什么技术栈，核心思路都是让圆角半径等于按钮宽高中较小值的一半，这样就能保证两端始终是正半圆，不会出现椭圆变形的情况。

内容的提问来源于stack exchange，提问作者UnderSampled