在可变高度元件上保持完美的圆角

Posted 2023-02-22

【中文标题】在可变高度元件上保持完美的圆角

【英文标题】：Maintain Perfectly Circular Corners on Variable-Height Element

【发布时间】：2013-11-24 18:21:16

【问题描述】：

我有一个圆角的按钮；意思是，按钮高50px，边框半径25px，在按钮两侧形成一个完美的半圆：

只要您已经知道按钮的高度（按钮高度 ÷ 2 = 边框半径），使用 CSS 即可轻松实现。

但是如果按钮的高度动态增加（例如添加更多文本），是否可以保持完美的圆形边缘？：

【参考方案1】：

只需将border-radius 设置为较高的值，例如360px。

div 
    height:50px;
    width:500px;
    background:red;
    border-radius:360px;

查看this jsFiddle example 了解我的意思。