html - border-top-left-radius 和 border-top-right-radius 没有给出预期的结果-6ren

html - border-top-left-radius 和 border-top-right-radius 没有给出预期的结果

转载作者：行者123 更新时间：2023-11-28 15:19:59

28

4

Edit1: Span code in the code and it's style are not needed, i just added them to show, where my border-radius is ending in first div, in second div and in third div, so i can show that i am confuse about the radius of third div, First div is plain, it just to show my div size.

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

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

I only added span to make sense each span as a height of 40px, same as the second value for border-radius in each div, which is 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 个 Angular 的半径，因此它们中的每一个只能适本地占用全宽 (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>