边框半径不适用于右侧图像答案

【问题标题】：Border-radius is not working on right side image边框半径不适用于右侧图像
【发布时间】：2020-10-29 02:11:32
【问题描述】：

我从一个网站开始，它在 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>

【问题讨论】：

#logo-img 的 CSS 中的错字，150 到 px 之间有一个空格

标签： html css image css-selectors border-radius

【解决方案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>

【讨论】：