前端问题求助：图片border-radius不生效+Outfit字体失效

1. 图片圆角不生效的修复 #

• 你未给图片元素添加 border-radius 样式，需在 .img 类中补充该属性；
• 无效选择器 *body 导致全局 box-sizing: border-box 未生效，应改为通用选择器 *。

2. Outfit 字体未应用的修复 #

• font-family 语法错误：字体名与后备字体间需用逗号分隔，且引号使用需规范，正确写法为 font-family: 'Outfit', sans-serif;；
• 建议将字体应用到 body 元素，实现全局文本统一字体。

修正后的 CSS 代码 #

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');

/* 正确的全局选择器 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: hsl(212, 45%, 89%);
    /* 全局应用 Outfit 字体 */
    font-family: 'Outfit', sans-serif;
}

.main {
    width: 300px;
    height: 500px;
    background-color: hsl(0, 0%, 100%);
    text-align: center;
    border-radius: 10px;
}

.main .img {
    width: 250px;
    height: 250px;
    padding: 1rem;
    /* 添加图片圆角 */
    border-radius: 10px;
    object-fit: cover;
}

.container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.main h1 {
    font-weight: 700;
}

.main p {
    font-weight: 400;
    padding: 0 1rem;
}

修正后的 HTML 代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Frontend Mentor | QR code component</title>

 <link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="container">
    <div class="main">
      <!-- 修正图片路径（若images文件夹与HTML同目录，去掉开头的/） -->
      <img class="img" src="images/image-qr-code.png" alt="QR code to Frontend Mentor">
      <h1>Improve your front-end skills by building projects</h1>
      <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
    </div>
  </div>

</body>
</html>

内容的提问来源于stack exchange，提问作者Najad