圓角不適用於div內的所有角？

Question

由於某種原因， border-radius不適用於 div 的所有角落（屏幕截圖中的灰色）。 有什么我做錯了嗎？

另外，如果您注意到我的標題的最右側沒有被覆蓋 - 我認為這不是 Chrome 的問題嗎？ （為了以防萬一，我也會為標題附上我的 CSS）。

對於圓角：

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 {
  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%;} 。