Question

编辑1：代码中的跨度代码并不需要它的样式，我只是将它们添加到show中，其中我的border-radius以第一个div结束，第二个div和第三个div结束，所以我可以显示我对第三个div的半径感到困惑，第一个div很简单，只是为了显示我的div大小。

这是我的html代码，我只添加了span来理解我的问题问题是我一起使用border-top-left-radius和border-top-right-radius，在moz文档中他们说你可以使用两个值，第一个是for vorizantal，第二个是for vertical，这很好我我们在描述行为时得到了预期的结果，

但是一旦我将它们一起应用，它们会缩短我的垂直长度或半径，任何身体都可以解释我的原因，

我只添加了跨度，使每个跨度的高度为40px，与每个div中border-radius的第二个值相同，即40px;

document.getElementById("defaultOpen-1").click();

function openTab(evt, tabName) {    
    var i, tabcontent, tablinks;

    tabcontent = document.getElementsByClassName("sg-tab-content");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" sg-current", "");
    }

    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += " sg-current";
}

Answer 1

这是因为第一个参数是宽度，当你写作时：

它试图获得border-top-right-radius: 100% 40px; border-top-left-radius: 100% 40px;宽度，但是当您在右上角和左上半径使用100%时却无法做到。{p>您正在尝试更改2个角的半径，因此每个角都可以正常占据整个宽度的一半（50％）（100％）。如果你写的话，它会正常工作：

100%

以下是一个例子：

＆＃13;

border-top-right-radius: 50% 40px;
border-top-left-radius: 50% 40px;

＆＃13;

border-top-left-radius和border-top-rigth-radius未按预期给出结果

1 个答案: