border-top-left-radius和border-top-rigth-radius没有得到预期的结果

用户名

Edit1：不需要代码中的跨度代码及其样式，我只是添加它们以显示，我的边框半径以第一格，第二格和第三格结尾，所以我可以表明我对此感到困惑第三div的半径，第一div是普通的，仅用于显示我的div大小。

这是我的html代码，我只添加了span来理解我的问题。问题是我正在一起使用border-top-left-radius和border-top-right-radius，在moz文档中，他们说您可以使用两个值，第一个将用于水平，第二将用于垂直，这很好，因为他们描述了这种行为，所以我得到了预期的结果，

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

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

<style>
            div {
                width:50px;
                height: 60px;
                background: lightblue;
                margin: 20px;
                display: inline-block;
            }
            
            .first {
                border-top-left-radius: 100% 40px;
            }
            
            .second {
                border-top-right-radius: 100% 40px;
            }
            
            .third {
                border-top-right-radius: 100% 40px;
                border-top-left-radius: 100% 40px;
            }

            span {
                display: inline-block;
                box-sizing: border-box;
                width: 100%;
                border: 1px solid;
                height: 40px;
            }
        </style>
    </head>
    <body>
        <div></div>
        <div class="first">
            <span class="one"></span>
        </div>
        
        <div class="second">
            <span class="two"></span>
        </div>
        
        <div class="third">
            <span class="three"></span>
        </div>

商业自杀

这是因为第一个参数是宽度，在编写时：

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

它试图获取100%宽度，但同时100%用于右上角和左上角半径时无法显示。您正在尝试更改2个角的半径，因此每个角只能占用整个宽度（100％）的一半（50％）。如果您输入以下内容，它将正常工作：

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

这是一个例子：

<style>
            div{
                width:50px;
                height: 60px;
                background: lightblue;
                margin: 20px;
                display:inline-block;
            }
            
            .first{
                border-top-left-radius: 100% 40px;
            }
            
            .second{
                border-top-right-radius: 100% 40px;
            }
            
            .third{
                border-top-right-radius: 50% 40px;
                border-top-left-radius: 50% 40px;
            }
            span{
                display: inline-block;
                box-sizing: border-box;
                width:100%;
                border:1px solid;
                height: 40px;
            }
        </style>
    </head>
    <body>
        <div></div>
        <div class="first">
            <span class="one"></span>
        </div>
        
        <div class="second">
        <span class="two"></span>
        </div>
        
        <div class="third">
        <span class="three"></span>
        </div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。