为什么我的边框半径只出现在浏览器的边缘？

Question

https://faylette.github.io/3-column-preview-card-component-main/

我正在解决这个问题并尝试将边框半径应用于包含元素，它确实会出现，但仅在元素接触浏览器边缘时才会出现。无论 flex-direction 是行还是列，都会发生这种情况。

border radius disappearing when not touching edge of browser

border radius appearing as desired when touching edge of browser

这里是相关的 CSS 代码。

/* contains each of the containers (car cards) */
.content {
    display: flex;
    overflow: hidden;
    border-radius: 10px;
}

/* each car card */
.container {
    width: 350px;
    padding: 40px;
}

div#sedans {
    background-color: hsl(31, 77%, 52%);
}

div#suvs {
    background-color: hsl(184, 100%, 22%);
}

div#luxury {
    background-color: hsl(179, 100%, 13%);
}

@media (max-width: 600px) {
    .content {
        flex-direction: column;
        width: 500px;
    }
}

<div class="content">

    <div class="container" id="sedans">
      <img src="images/icon-sedans.svg">
      <h2>Sedans</h2>
      <p>
        Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city
        or on your next road trip.
      </p>
      <button class="btn1">Learn More</button>
    </div>

    <div class="container" id="suvs">
      <img src="images/icon-suvs.svg">
      <h2>SUVs</h2>
      <p>
        Take an SUV for its spacious interior, power, and versatility. Perfect for your next family vacation
        and off-road adventures.
      </p>
      <button class="btn2">Learn More</button>
    </div>

    <div class="container" id="luxury">
      <img src="images/icon-luxury.svg">
      <h2>Luxury</h2>
      <p>
        Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury
        rental and arrive in style.
      </p>
      <button class="btn3">Learn More</button>
    </div>
  </div>

如果我在问这个问题时做错了什么，请告诉我如何解决这个问题，因为这是我在 Stack Overflow 上的第一篇文章。谢谢！

Answer 1

这是因为你的容器是圆形的，而不是里面的元素，你只看到它是overflow:hidden; 的效果。如果您的元素总是占用父级 (.content) 的 100% 宽度，那就没问题了。

你可以做的是在内容中设置第一个和最后一个元素的样式：

* {
    box-sizing: border-box;
}

/* font-family: 'Big Shoulders Display', cursive;
font-family: 'Lexend Deca', sans-serif; */

body {
    font-size: 15px;
}

/* contains each of the containers (car cards) */
.content {
    display: flex;
    overflow: hidden;
    /* something wonky going on with the border-radius */
}

/* each car card */
.container {
    width: 350px;
    padding: 40px;
}

div#sedans {
    background-color: hsl(31, 77%, 52%);
}

div#suvs {
    background-color: hsl(184, 100%, 22%);
}

div#luxury {
    background-color: hsl(179, 100%, 13%);
}


h2 {
    color: hsl(0, 0%, 95%);
    font-family: 'Big Shoulders Display', cursive;
    text-transform: uppercase;
    font-size: 30px;
}

p {
    font-family: 'Lexend Deca', sans-serif;
    color: hsla(0, 0%, 100%, 0.75);
    line-height: 1.5;
    margin-bottom: 75px;
}

button {
    background-color: hsl(0, 0%, 95%);
    border: 2px solid hsl(0, 0%, 95%);
    font-family: 'Lexend Deca', sans-serif;
    border-radius: 20px;
    padding: 10px 20px;
}

.btn1 {
    color:hsl(31, 77%, 52%);
}

.btn2 {
    color: hsl(184, 100%, 22%);
}

.btn3 {
    color: hsl(179, 100%, 13%);
}

button:hover {
    cursor: pointer;
    background-color: transparent;
    color: hsl(0, 0%, 95%);
}

@media (max-width: 600px) {
    .content {
        flex-direction: column;
    }
}


/* ADDED CODE */
.content .container:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}


.content .container:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

<div class="content">

    <div class="container" id="sedans">
      <img src="images/icon-sedans.svg">
      <h2>Sedans</h2>
      <p>
        Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city
        or on your next road trip.
      </p>
      <button class="btn1">Learn More</button>
    </div>

    <div class="container" id="suvs">
      <img src="images/icon-suvs.svg">
      <h2>SUVs</h2>
      <p>
        Take an SUV for its spacious interior, power, and versatility. Perfect for your next family vacation
        and off-road adventures.
      </p>
      <button class="btn2">Learn More</button>
    </div>

    <div class="container" id="luxury">
      <img src="images/icon-luxury.svg">
      <h2>Luxury</h2>
      <p>
        Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury
        rental and arrive in style.
      </p>
      <button class="btn3">Learn More</button>
    </div>
  </div>

  <div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
    Coded by <a href="#">Kitty</a>.
  </div>

Answer 2

您所要做的就是在您的content 上使用inline-flex 而不是flex。您的问题是由于 content 元素占用 100% 宽度，而不是您的弹性项目。

但是当你调整浏览器的大小或者当元素接触到边缘时，你的 flex 容器会变小，overflow:hidden 生效，你的border-radius 会按预期工作。

所以当您使用inline-flex 时，content 的宽度将保持等于您的项目的宽度。

但这会导致其他问题，例如元素溢出视口等，为此您可以使用content 的媒体查询在一定宽度后使用 flex 而不是 inline flex，在您的情况下约为 1300px。

另一个问题：

我注意到当宽度小于 600 像素时，您的单个容器不会显示边框半径属性，您可以执行以下操作： 由于您没有将边框半径应用于 content 而是整个 container 本身，这就是为什么它们单独不显示 border-radius 属性的原因。 但是如果你给container加上border-radius，那么它就会失去它现在的形式。

所以你可以做的是使用 媒体查询 并在一定宽度的页面定义/显示边框半径为container。

在所有这些之后，您的代码应该如下运行：

/* contains each of the containers (car cards) */
.content {
    display: inline-flex;
    overflow: hidden;
    border-radius: 10px;
}

/* each car card */
.container {
    width: 350px;
    padding: 40px;
}

div#sedans {
    background-color: hsl(31, 77%, 52%);
}

div#suvs {
    background-color: hsl(184, 100%, 22%);
}

div#luxury {
    background-color: hsl(179, 100%, 13%);
}
@media (max-width: 1300px){
    .content{
        display:flex;
        }
}
@media (max-width: 600px) {
    .content {
        flex-direction: column;
        width: 500px;  
        gap:2px;
    }
    .container{
    border-radius:10px;
    }
}

<div class="content">

    <div class="container" id="sedans">
      <img src="images/icon-sedans.svg">
      <h2>Sedans</h2>
      <p>
        Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city
        or on your next road trip.
      </p>
      <button class="btn1">Learn More</button>
    </div>

    <div class="container" id="suvs">
      <img src="images/icon-suvs.svg">
      <h2>SUVs</h2>
      <p>
        Take an SUV for its spacious interior, power, and versatility. Perfect for your next family vacation
        and off-road adventures.
      </p>
      <button class="btn2">Learn More</button>
    </div>

    <div class="container" id="luxury">
      <img src="images/icon-luxury.svg">
      <h2>Luxury</h2>
      <p>
        Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury
        rental and arrive in style.
      </p>
      <button class="btn3">Learn More</button>
    </div>
  </div>