-1

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

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

不接触浏览器边缘时边框半径消失

触摸浏览器边缘时根据需要显示边框半径

这是相关的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 上的第一篇文章，如果我在问这个问题时做错了什么。谢谢！

4

2 回答 2

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>

于 2021-08-12T20:09:33.007 回答
0

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

但是，当您调整浏览器的大小时，或者当元素触及 edge 时，您的 flex 容器会变小并overflow:hidden生效，并且您border-radius可以按预期工作。

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

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

另一个问题 ：

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

因此，您可以做的是使用媒体查询并在页面定义/显示边框半径的特定宽度后为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>

于 2021-08-12T20:59:38.600 回答