javascript - 动态更改 div 的边框半径

Question

我在背景中有一个带有 flex 边框的红色 div 和一个带有 flex 边框的黄色 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");
});

现在，我想要的是当黄色条没有完全填满红色条时，它的右边框是平的(不是 flex 的)。但当它完全填满红色条时，它应该会变得 flex 。有人可以建议实现这个的最佳方法吗？

Answer 1

只需将 overflow: hidden 添加到 #topDiv

JSFiddle