html - 圆 Angular 不适用于 div 中的所有 Angular ？

Question

出于某种原因，border-radius 并未应用于 div 的所有 Angular (屏幕截图中的灰色部分)。我做错了什么吗？

此外，如果您注意到我的页眉最右边没有被覆盖 - 我认为这不是 Chrome 的问题？ (为了以防万一，我也会附上我的标题 CSS)。

对于圆 Angular :

HTML:

<div class="header"></div>
<h1 class="title">Creative Checker</h1>
<div class="row">
  <div class="col-12 col-md-10 offset-md-1">
    <div class="alert alert-success" style="display: none">
    </div>
    <div class="alert alert-danger" style="display: none">
    </div>
    <div class="row">
      <div class="col-md-12">
        <p class="text-center">
          1. Select product type:
        </p>
      </div>
    </div>
    <div class="row mb-3">
      <div class="col-lg-4">
        <button type="button" id="btn-snapshot" class="btn btn-secondary col-lg-12">Snapshot</button>
      </div>
      <div class="col-lg-4">
        <button type="button" id="btn-tmd" class="btn btn-secondary col-lg-12">TMD</button>
      </div>
      <div class="col-lg-4">
        <button type="button" id="btn-bpush" class="btn btn-secondary col-lg-12">Behavioural Push</button>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-12">
        <p class="text-center">
          2. Upload folder/images:
        </p>
        <form action="server.php" class="dropzone" id="my-awesome-dropzone" onsubmit="onSubmit()">
          <!-- <select name="product-type" id="product_type">
                <option value="snapshot">
                  Snapshot
                </option>
                <option value="TMD">
                  TMD
                </option>
                <option value="b-push">
                  Behavioural Push
                </option>
              </select> -->
        </form>
      </div>
    </div>
  </div>
</div>

CSS:

.row {
  padding-top: 12px;
  padding-bottom: 15px;
  background-color: #F1F1F1;
  border-radius: 50px;
}

对于 header 问题:

.header {
  min-height: 100px;
  background-image: url('header_wallpaper.png');
  background-position: center;
  background-size: contain;
}

Answer 1

我正在查看您的代码，我也在 codepen 和 border-radius 属性上进行了尝试，它工作正常，即使在您分享的照片中，它似乎也在做它应该做的事情。我注意到 div 的左侧太靠近浏览器的边框，这就是它似乎没有应用于所有 div 的原因。

首先，我建议你重新设置css。因为浏览器本身具有默认情况下适用于您的页面的属性，它可能会使事情变得奇怪，也许这就是使您的 div 看起来像那样的原因。为此，在您的 css 文件的开头执行:

*{
  margin: 0;
  padding: 0;
}

您还可以在重置 css 中添加诸如 color 或 font-family 之类的内容，以将内容应用于整个页面。

这应该可以解决 div 和标题的问题，如果没有，请尝试添加到 .row{ margin: 1px;} 或类似的东西和 .header {width:100%;}.