动态更改div的边框半径

Question

我在背景中有一个带有曲线边框的红色div，上面渲染了一个带有曲线边框的黄色div。黄色条正在慢慢填充红色条（例如用于显示进度）。请查看此fiddle：

http://jsfiddle.net/a6Xy9/3/

代码

<div id="topDiv" style="height:20px; width:200px; background-color:red; border-radius:10px;">
    <div id="childDiv" style="height:20px; width:100px; background-color:yellow; border-top-left-radius:10px; border-bottom-left-radius:10px;">
    </div>
</div>
<br/>
<br/>    
<input id="change" type="button" value="Change Width" style="height:25px; width:100px;"></input>

$("#change").click(function(){
 $("#childDiv").width((parseInt($("#childDiv").width()) + 5) + "px");
});

现在，我希望黄色条的右边框在未完全填充红色条时是平的（非曲线）。但当它完全填满红色条时，应变成曲线。有人能建议最好的实现方法吗？

- Amar

Answer 1

只需在#topDiv中添加overflow: hidden即可。

JSFiddle

- Steve Sanders

Answer 2

由于#childDiv是#topDiv的子元素，因此这应该可以解决问题：

#topDiv { overflow:hidden; }

回答这个编程问题，要动态地改变border-radius，可以尝试这样做：

$("#childDiv").css('border-radius', '10px');

但在你的情况下，overflow 属性是最佳实现。

- Joe

Answer 3

在你的 $("#change").click() 函数内，加入以下条件语句。它将比较两个 div 的宽度，如果子 div 的宽度大于或等于顶部 div，则会调整子 div 的边框半径。

$("#change").click(function(){
    $("#childDiv").width((parseInt($("#childDiv").width()) + 5) + "px");

    var filled = $("#childDiv").width() >= $("#topDiv").width();
    $("#childDiv").css('border-radius', filled ? '10px' : 0);
});

- AverageGuy