border-top-left-radius 和border-top-right-radius 没有按预期给出结果答案

【问题标题】：border-top-left-radius and border-top-rigth-radius are not giving result as expectedborder-top-left-radius 和border-top-right-radius 没有按预期给出结果
【发布时间】：2018-03-04 15:36:35
【问题描述】：

Edit1：代码中的 Span 代码及其样式不需要，我只是将它们添加到显示中，我的边框半径在第一个 div、第二个 div 和第三个 div 中结束，所以我可以显示我对第三个 div 的半径感到困惑，第一个 div 很简单，它只是为了显示我的 div 大小。

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

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

我只添加了 span 以使每个 span 的高度为 40px，与每个 div 中的第二个边框半径值相同，即 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>

【问题讨论】：

不，我正在考虑垂直侧的半径结束点，我刚刚添加了跨度以显示它应该在哪里结束以及它在最后一个 div 的结束位置，我正在编辑我的问题，我认为它造成混乱

标签： html css

【解决方案1】：

因为第一个参数是宽度，而你在写的时候：

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>

【讨论】：

谢谢，我认为你的回答更有意义，也更清楚它们是如何工作的，所以对此表示赞同，所以使用 100% 宽度会导致问题，这不是我最初问的，我问为了解释，但你的回答更有意义，所以我会接受，因为我只是想要一致性，谢谢