0

我从一个网站开始，它在 css 中使用边框半径。但不能按要求工作。它在左上角和左下角变得弯曲，但在右上角和右下角没有。我也尝试过特定的border-top-right-radius：但仍然无法正常工作。

在此处输入图像描述

body {
  font-size: 16px;
  color: #fff;
  background-color: #61122f;
  font-family: 'Oxygen', sans-serif;
}

/*** HEADER ***/
#header-nav {
  background-color: #f6b319;
  border-radius: 0;
  border: 0;
}

#logo-img {
  background: url('https://via.placeholder.com/150') no-repeat;
  border-radius: 60px;
  width: 150 px;
  height: 150px;
  margin: 10px 15px 10px 5px;
  border-collapse: inherit;
}
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap" rel="stylesheet">

  <header>
    <nav id="header-nav" class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <a href="index.html" class="">
            <div id="logo-img" alt="Logo image"></div>
          </a>
        </div>
      </div>
    </nav>
  </header>

4

1 回答 1

1

宽度值和单位之间不应有空格，否则宽度为 100%，这是块元素的默认宽度div。

即使您第一眼只区分与背景的部分，但如果您使用浏览器的检查器工具，您可以检查它。

body {
  font-size: 16px;
  color: #fff;
  background-color: #61122f;
  font-family: 'Oxygen', sans-serif;
}

/*** HEADER ***/
#header-nav {
  background-color: #f6b319;
  border-radius: 0;
  border: 0;
}

#logo-img {
  background: url('https://via.placeholder.com/150') no-repeat;
  border-radius: 60px;
  width: 150px;
  height: 150px;
  margin: 10px 15px 10px 5px;
  border-collapse: inherit;
}
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Big Bite</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap" rel="stylesheet">
  </head>
<body>
  <header>
    <nav id="header-nav" class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <a href="index.html" class="">
            <div id="logo-img" alt="Logo image"></div>
          </a>
        </div>
      </div>
    </nav>
  </header>

  <!-- jQuery (Bootstrap JS plugins depend on it) -->
  <script src="js/jquery-2.1.4.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/script.js"></script>
</body>
</html>

于 2020-07-08T16:01:59.840 回答