border-radius; 关于圆角数值设定的问题

 CSS3 的 border-radius属性，可以通过指定数值或者百分比确定四个圆角的长短轴。

共可以设置8个数值，（水平方向）左上，右上，右下，左下 ／ （竖直方向）左上，右上，右下，左下。

而设置数值理论上没有大小限定，所以可以设置大于边框width, height的数值，但也同时会造成四个圆角的形状难以控制。

例如，边框 width: 400px; height: 200px; 

设置样式： border-radius: 300px 500px / 200px 300px;  这里水平方向，和竖直方向都有超过各自的边框长度，而我们知道，border－radius 的长短轴并不会超过边框大小。（不好意思，语言组织水平太低。。。。）

虽然在开发的时候应该尽量避免出现这种数值设定，但是我们总会好奇，出现这种情况的时候，圆角会如何表现呢。

通过我自己的实验，当设置长度大于本方向边框长度时，浏览器会自动缩小长度至边框大小，并且对另一垂直轴进行等比例缩放。

倘若水平和竖直方向都存在长度设置过大的情况，则以长度设置相对更大的一轴为基准，对两轴同时缩放。

以上没有表达清楚，这里就只给出最终结论公式，供大家参考。

设边框大小： width: w; height: h;   

圆角设定：border-radius: x1 x2 x3 x4 / y1 y2 y3 y4;  

则不论 x 和 y 是否会大于 w, 和 h. 最终圆角的数值设定大小都可以用以下公式等价：

令:  a = max ( (x1+x2)/w, (x3+x4)/w), (y1+y4)/h), (y2+y3)/h), 1 )

将 x1 至 y4 依次重新赋值：

(x1 x2 x3 x4 y1 y2 y3 y4 ) = (x1/a, x2/a, x3/a, x4/a, y1/a, y2/a, y3/a, y4/a), 

重设： border-radius: x1 x2 x3 x4 / y1 y2 y3 y4 ;  

此时圆角表现等价于我们初始设定的圆角表现。

本人进行过亲自尝试，没有问题。若您在实验过程中发现公式不正确，还望指正，谢谢。