边界半径没有反映在一个元素中答案

【问题标题】：border radius is not reflecting in one element边界半径没有反映在一个元素中
【发布时间】：2022-08-18 23:32:19
【问题描述】：

我正在尝试在 frontendmentor.io 中解决一些挑战。尝试复制产品卡。我几乎完成了。但是我被 .right 元素的边框半径卡住了，我将边框右上角和右下角半径应用为 10 px 到 .right 元素。正确的元素。但它没有反映在浏览器中。另一个问题是卡片的宽度。实际项目的宽度与我的宽度略有不同。实际项目宽度小于我的。我在这里附上了两张图片.请解决这两个问题

原来的

[！[

@import url(\'https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,700&family=Montserrat:wght@500;700&display=swap\');


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background-color: hsl(30, 38%, 92%);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
}

main{width: 100%;}

.card {
    min-width: 600px;
    width: 30%;
    background-color: #fff;
    display: flex;
    margin: 0 auto;
    

}
.right{
    display: flex;
    flex-direction: column;
    width: 50%;
    row-gap: 24px;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    padding: 10px 30px;
}

.right .itemcategory{
    color: hsl(228, 12%, 48%);
    letter-spacing: 4px;
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    
}

.left{
    width: 50%;
    background-image: url(\"/images/image-product-desktop.jpg\");
    background-position: center;
    background-size: cover;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
}

.des{
    color: hsl(228, 12%, 48%);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5rem;
}

h1{
    font-size: 30px;
    font-weight: 700;
    line-height: 30px;
}

.offerprice {
    color: hsl(158, 36%, 37%);
    font-size: 28px;
}
.beforeprice{
    font-size: 14px;
    
}

button{
    background-color: hsl(158, 36%, 37%);
    width: 100%;
    padding: 14px;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    color: #fff;
    align-items: center;
    font-weight: 700;
    border-radius: 7px;
    border: none;

    

}

button img{
    margin-right: 7px;
}

<!DOCTYPE html>
<html lang=\"en\">
<head>
  <meta charset=\"UTF-8\">
  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <!-- displays site properly based on user\'s device -->

  <link rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"./images/favicon-32x32.png\">
  <link rel=\"stylesheet\" href=\"style.css\">
  
  <title>Frontend Mentor | Product preview card component</title>
</head>
<body>

  <main>
    <div class=\"card\">
      <div class=\"left\">
        <img src=\"\" alt=\"\">
      </div>
      <div class=\"right\">
        <p class=\"itemcategory\">Perfume</p>
        <h1>Gabrielle<br> Essence Eau <br>De Parfum</h1>
        <p class=\"des\"> A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.</p>
      
      <div class=\"price\">
          <p class=\"offerprice\">$149.99</p>
          <p class=\"beforeprice\">$169.99</p>
      </div>
         <button>
        <img src=\"images/icon-cart.svg\" alt=\"\" >
        Add to Cart
      </button>
      
    </div>

  </main>
</body>

</html>

]2]2

溢出：隐藏在您应用边界半径的位置
只需将基本的border-radius: 10px 应用于.card元素

标签： html css border-radius

【解决方案1】：

第一个问题可以通过在 .card 类中添加“border-radius”来轻松解决。第二个问题可以通过更改 .card 类的高度并将“padding-top”添加到 .right 类来解决。

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,700&family=Montserrat:wght@500;700&display=swap');


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background-color: hsl(30, 38%, 92%);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
}

main{width: 100%;}

.card {
    min-width: 600px;
    width: 30%;
    background-color: #fff;
    display: flex;
    margin: 0 auto;
    border-radius: 10px;

}
.right{
    display: flex;
    flex-direction: column;
    width: 50%;
    row-gap: 24px;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    padding: 10px 30px;
}

.right .itemcategory{
    color: hsl(228, 12%, 48%);
    letter-spacing: 4px;
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    
}

.left{
    width: 50%;
    background-image: url("/images/image-product-desktop.jpg");
    background-position: center;
    background-size: cover;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
}

.des{
    color: hsl(228, 12%, 48%);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5rem;
}

h1{
    font-size: 30px;
    font-weight: 700;
    line-height: 30px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="stylesheet" href="style.css">
  
  <title>Frontend Mentor | Product preview card component</title>
</head>
<body>

  <main>
    <div class="card">
      <div class="left">
        <img src="" alt="">
      </div>
      <div class="right">
        <p class="itemcategory">Perfume</p>
        <h1>Gabrielle<br> Essence Eau <br>De Parfum</h1>
        <p class="des"> A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.</p>
      
      <div class="price">
          <p class="offerprice">$149.99</p>
          <p class="beforeprice">$169.99</p>
      </div>
         <button>
        <img src="images/icon-cart.svg" alt="" >
        Add to Cart
      </button>
      
    </div>

  </main>
</body>

</html>

【讨论】：