Question

我在背景中有一个红色的div，边框是弯曲的，黄色的div也是一个弯曲的边框。黄色条缓慢地填满红色条（例如，表示进度）。看到这个小提琴：

代码

<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");
});

现在，我想要的是黄色条的右边框在没有完全填满红色条的情况下是平的（不是弯曲的）。但是当它完全填满红色条时它应该变成弯曲的。有人可以提出实施此方法的最佳方法吗？

Answer 1

只需将overflow: hidden添加到#topDiv

即可

JSFiddle

Answer 2

由于#childDiv是#topDiv的孩子，这应该可以解决问题：

#topDiv { overflow:hidden; }

要回答这个问题，要动态更改border-radius，请尝试以下操作：

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

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

Answer 3

在$（＆＃34; #change＆＃34;）。click（）函数内，放置此条件语句。它将比较两个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);
});

动态更改div的border-radius

3 个答案:

JSFiddle