带有div的边界半径问题
带有div的边界半径问题
提问于 2020-04-27 12:19:23
我在HTML画布上有一个带有div集的CSS flexbox。我想要在所有四个角周围都有一个边界半径。我尝试过使用border-radius: 80px;，但徒劳无功。A quick fiddle is here。我想要这样的东西。在每一个角落都被凿开了。
但我得到了这个。
请帮帮忙。
回答 3
Stack Overflow用户
回答已采纳
发布于 2020-04-27 12:40:26
你的问题是overflow: scroll;。从.stage-area中删除overflow: ?;属性。对于border-radius，overflow: scroll;不能一起工作，它应该是hidden或inherit。在代码片段下面。
.stage-area {
width: 50%;
background: #ffffff;
box-shadow: 0px 24px 34px rgba(0, 0, 0, 0.25);
border-radius: 80px;
-webkit-border-radius: 80px;
-moz-border-radius: 80px;
display: flex;
flex-direction: column;
align-items: center;
max-height: 60%;
/*overflow: scroll;*/
}
.stage-area {
width: 50%;
background: #ffffff;
box-shadow: 0px 24px 34px rgba(0, 0, 0, 0.25);
border-radius: 80px;
-webkit-border-radius: 80px;
-moz-border-radius: 80px;
display: flex;
flex-direction: column;
align-items: center;
max-height: 60%;
/*overflow: scroll;*/
}
body {
height: 100%;
margin: 0px;
background-color: #ffce31;
}
.brand-icon {
padding: 0 10% 0 10%;
}
.outer-yellow-area {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 100%;
}<div className="outer-yellow-area">
<img className="brand-icon" src={brandIcon} alt="logo" />
<div class="stage-area">
Center stage
<div>below stage</div>
<div>below stage</div>
<div>below stage</div>
<div>below stage</div>
<div>below stage</div>
<div>below stage</div>
<div>below stage</div>
</div>
</div>
Stack Overflow用户
发布于 2020-04-27 12:41:57
我已经检查了你的小提琴，它的工作方式如你所愿，唯一的问题是你添加了overflow: scroll；这导致了你面临的这个问题。
检查this
overflow:scroll;去掉这个。
如果ned还有其他东西，请随意分享
Stack Overflow用户
发布于 2020-04-27 15:03:52
如果你想要这样的东西: border-radius with overflow: scroll，那么这就是answer.Else，请让我知道。
<div className="outer-yellow-area">
<img className="brand-icon" src={brandIcon} alt="logo" />
<div class="stage-area">
Center stage
<div class="bstage">
<div>below stage</div>
<div>below stage</div>
<div>below stage</div>
<div>below stage</div>
<div>below stage</div>
<div>below stage</div>
<div>below stage</div>
<div>below stage</div>
<div>below stage</div>
<div>below stage</div>
<div>below stage</div>
<div>below stage</div>
<div>below stage</div>
<div>below stage</div>
<div>below stage</div>
<div>below stage</div>
<div>below stage</div>
<div>below stage</div>
<div>below stage</div>
<div>below stage</div>
<div>below stage</div>
<div>below stage</div>
<div>below stage</div>
<div>below stage</div>
</div>
</div>
</div>和CSS
.stage-area {
width: 50%;
height: 60%;
background: #ffffff;
box-shadow: 0px 24px 34px rgba(0, 0, 0, 0.25);
border-radius: 40px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
display: flex;
flex-direction: column;
margin-left:auto;
margin-right:auto;
text-align:center;
border:10px solid transparent;
}
.bstage{
overflow-y:scroll;
max-height: 100px;
}
.bstage::-webkit-scrollbar {
width: .8em;
}
.bstage::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
border-radius: 30px;
}
.bstage::-webkit-scrollbar-thumb {
background-color: grey;
border-radius:30px;
height: 5px;
}
body {
height: 100%;
margin: 0px;
background-color: #ffce31;
}
.brand-icon {
padding: 0 10% 0 10%;
}
.outer-yellow-area {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 100%;
}jsfiddle：https://jsfiddle.net/a14ythfg/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61451649
复制相关文章
相似问题
腾讯云开发者
