Question

我从一个网站开始，该网站在CSS中使用border-radius。但不能按要求工作。它在左上和左下弯曲，但在右上和右下弯曲。我还尝试了特定的border-top-right-radius：但仍然无法正常工作。

enter image description here

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>

Answer 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>

边框半径在右侧图像上不起作用

1 个答案: