边框半径不适用于更宽的屏幕

Posted 2023-03-28

【中文标题】边框半径不适用于更宽的屏幕

【英文标题】：Border Radius not working on wider screen

【发布时间】：2021-11-29 08:36:05

【问题描述】：

我正在从一个使用边框半径为 50 像素的卡片的项目中学习。但是，在更宽的屏幕上，边框不起作用。这是一个非常简单的代码，但我不明白为什么会这样 你能帮帮我吗？

        <div class="panel panel1" style="background-image: url('https://images.unsplash.com/photo-1448375240586-882707db888b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8Zm9yZXN0fGVufDB8fDB8fA%3D%3D&w=1000&q=80')">
            <h3>Explore the world</h3>
        </div>

body 
   font-family: 'Muli', sans-serif;
   margin: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
   overflow: hidden;


.container 
   display: flex;
   width: 90vw;
   overflow: hidden;


.panel 
   background-size: auto 100%;
   background-position: center;
   background-repeat: no-repeat;
   height: 80vh;
   border-radius: 50px;
   color: white;
   cursor: pointer;
   flex: 0.2;
   margin: 15px;
   position: relative;
   transition: flex 0.7s ease-in;
   overflow: hidden;


.panel h3 
   font-size: 24px;
   position: absolute;
   bottom: 60px;
   left: 200px;
   margin: 0;
   opacity: 0;


.panel.active 
   flex: 2;
   overflow: hidden;

Border radius not working

【参考方案1】：

查看打印屏幕，边框半径似乎在起作用，但 div 正在被切割，也许您可​​以通过向面板添加宽度来解决此问题

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。