实现响应式圆形按钮应如何设置border-radius属性？

问题原因 #

border-radius的百分比取值是分别基于元素自身的宽度和高度计算的：水平半径对应宽度百分比，垂直半径对应高度百分比。你的按钮宽度为响应式的40%，总高度固定为45px（15px内容高度 + 上下各15px内边距），宽高比会随父容器宽度动态变化，因此用百分比设置border-radius永远得不到两端完全圆润的胶囊效果。

解决方案 #

直接使用足够大的相对单位作为border-radius取值即可：只要取值≥按钮高度的1/2，就能实现和border-radius: 100px完全一致的效果，且全程不需要使用px单位，天然适配响应式场景。推荐使用border-radius: 999em，这个取值足够大，适配几乎所有常规尺寸的按钮，就算后续你调整按钮的宽高、内边距参数，也能自动保持两端全圆角的效果。

修改后的CSS代码如下：

.button-in-main-box{
    background-color: #04AA6D;
    border:1px solid ;
    height: 15px;
    padding: 15px 0;
    width: 40%;
    border-radius: 999em;
    display: block;
    text-align: center;
}

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