我为我4岁的孩子做了一个按钮。 2 div s，css border-radius:和jquery .animate。我使用百分比border-radius来获得漂亮的椭圆形状。
到目前为止，一切都运转良好，除非按下按钮＆＃34;我需要缩短按钮的下方部分。这是为了隐藏div的角落。然而，当我缩短div时，省略号的曲线＆＃34; squhes＆＃34;。它很微妙，我不认为我的孩子会注意到，但是我知道。
我的问题有两方面： 我该如何解决这个压扁问题？ 为什么这会产生一个我正在寻找的非椭圆：
border-bottom-right-radius: 100px;
border-bottom-left-radius: 100px;
答案 0 :(得分：1)
它会产生问题，因为基于百分比的高度基于宽度和高度，因此当您更改高度时，百分比半径会发生变化。这就是你首先实现椭圆的方法。我通过操纵第二个div来解决这个问题，在两者之间，上面和下面有一个椭圆，然后只为中间div设置动画margin-top和height（并保留顶部椭圆动画）单独的）。
以下是解决方案的代码：http://codepen.io/anon/pen/aOONXm
要回答第二个问题，100px的值不能按您希望的方式工作，因为（border-bottom-right-radius: 100px;）是设置高度和宽度值（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