用 border-radius 省略号压缩按钮

Question

我正在为我 4 岁的孩子制作一个按钮。 2 divs、css border-radius: 和 jquery .animate。我使用百分比 border-radius 来获得漂亮的椭圆形。

到目前为止一切正常，除了当按钮是 "depressed" 我需要缩短按钮的下方部分。这是为了隐藏边角div。然而，当我缩短 div 时，省略号的曲线 "squishes"。这很微妙，我不认为我的孩子会注意到，但我注意到了。

我的问题是two-fold：我该如何解决这个挤压问题？为什么这会产生 not-the-ellipse 我正在寻找：

border-bottom-right-radius: 100px;
border-bottom-left-radius: 100px;

笔：http://codepen.io/claytron5000/pen/PqqNya

Answer 1

产生这个问题是因为基于百分比的高度是基于宽度和高度的，所以当你改变高度时，百分比半径也会改变。这就是您首先获得椭圆的方法。我已经解决了这里的问题，方法是在两者之间操纵第三个 div，并在上方和下方设置一个椭圆，然后对中间 div 的 margin-top 和 height 进行动画处理仅（并保留顶部的椭圆动画）。

这是解决方案的代码笔：http://codepen.io/anon/pen/aOONXm

要回答你的第二个问题，100px 的值不能按照你希望的方式工作，因为 (border-bottom-right-radius: 100px;) 是 shorthand 用于设置高度和宽度值 (border-bottom-right-radius: 100px 100px;).如果要使用像素值，请使用

border-bottom-right-radius: 150px 100px;
border-bottom-left-radius: 150px 100px;

在这种情况下相当于

 border-bottom-right-radius: 50%;
 border-bottom-left-radius: 50%;

因为你的宽度是300px，高度是200px

用 border-radius 省略号压缩按钮

squish a button with border-radius ellipsis

css

jquery

jquery-animate