在可变高度元素上保持完美的圆角 [英] Maintain Perfectly Circular Corners on Variable-Height Element

问题描述

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

I have a button with perfectly rounded corners; meaning, the button is 50px high and the border radius is 25px, making a perfect half-circle on either side of the button:

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

Achieving this with CSS is easy, provided you already know the height of the button (button height ÷ 2 = border radius).

但是，如果按钮的高度动态增加(例如，添加了更多文本)，是否可以保持完美的圆形边缘?

But is it possible to maintain the perfectly-circular edges if the button's height increases dynamically (more text is added, for example)?:

推荐答案

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

Just set the border-radius to something high, like 360px.

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

查看 这个jsFiddle示例 ，以了解我的意思.

Look at this jsFiddle example to see what I mean.

这篇关于在可变高度元素上保持完美的圆角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！