gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 15:19:59 28 4
gpt4 key购买 nike

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>

关于html - border-top-left-radius 和 border-top-right-radius 没有给出预期的结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46375174/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com