-1

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

私はこれに取り組んでおり、含まれている要素に境界線の半径を適用しようとしていますが、表示されますが、要素がブラウザーの端に触れた場合にのみ表示されます。これは、フレックス方向が行または列のどちらであるかに関係なく発生します。

ブラウザの端に触れていないときに境界線の半径が消える

ブラウザの端に触れたときに境界線の半径が希望どおりに表示される

関連する 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>

これを修正する方法を教えてください。また、これがスタック オーバーフローに関する私の最初の投稿であるため、この質問をする際に何か問題があった場合はお知らせください。ありがとうございました！

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 に答える