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

Question

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

        <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;
}

边界半径不起作用

Answer 1

看着打印屏幕，看起来边界半径正在工作，但是 div 正在被切割，也许你可以通过向面板添加宽度来解决这个问题