CSS 圆角边框在边框和内容之间留有空隙

Question

我想要带有圆角边框的选项卡，但边框和内容之间有一个奇怪的间隙。谁能帮我摆脱它？

沙盒link：https://codesandbox.io/s/borders-on-tabs-95cwzp?file=/index.html

body {
  font-family: sans-serif;
}

.container {
  display: flex;
  justify-content: center;
  zoom: 2; /* just to see it better */
}

ul {
  list-style: none;
  display: flex;
  display: flex;
  list-style: none;
  border: 1px solid #133275;
  border-radius: 16px;
  background-color: #9db4d6;
  overflow: hidden;

  /* To reset browser native styles  */
  margin: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 0;
}

li {
  padding: 6px 12px;
  font-size: 20px;
  border-radius: 16px;
}

li.active {
  background-color: #133275;
  color: white;
}

<html>
  <body>
    <div class="container">
      <ul>
        <li class="active">First tab</Item>
        <li>Second tab</Item>
      </ul>
    </div>
  </body>
</html>

一个类似这个的问题：Gap between background (or children) and rounded border

Answer 1

你的内部元素比外部元素小，你必须为内部元素使用更小的半径。

body {
  font-family: sans-serif;
}

.container {
  display: flex;
  justify-content: center;
  zoom: 2; /* just to see it better */
}

ul {
  list-style: none;
  display: flex;
  display: flex;
  list-style: none;
  border: 1px solid #133275;
  border-radius: 16px;
  background-color: #9db4d6;
  overflow: hidden;

  /* To reset browser native styles  */
  margin: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 0;
}

li {
  padding: 6px 12px;
  font-size: 20px;
  border-radius: 13px;
}

li.active {
  background-color: #133275;
  color: white;
}

<html>
  <body>
    <div class="container">
      <ul>
        <li class="active">First tab</Item>
        <li>Second tab</Item>
      </ul>
    </div>
  </body>
</html>

Answer 2

您的第一个 <li> 元素比父元素 <ul> 小一点点。 Border raidus 是根据元素的大小计算的。你有两个不同大小的元素，所以当它在这里计算时（数学与 pi ），那一点点变得引人注目。

要了解我在说什么，请删除上述 <li> 元素的 border-radius。

要解决您的问题，请增加 <li> 或 <ul> 的 border-radius。这会产生不同的结果，所以选择你的毒药。

您还可以将 background-color 更改为

background: linear-gradient(to right, #133275 10%, #9db4d6 50%);

祝你好运！

Answer 3

J 只是从“ul”标签中“删除”边框并添加到“li”标签中。然后对于活动“li”，我使用“#133275”这种颜色，非活动使用“#9db4d6”这种边框颜色。您的 space 问题已解决。

body {
  font-family: sans-serif;
}

.container {
  display: flex;
  justify-content: center;
  zoom: 2; /* just to see it better */
}

ul {
  list-style: none;
  display: flex;
  display: flex;
  list-style: none;
  border-radius: 16px;
  background-color: #9db4d6;
  overflow: hidden;

  /* To reset browser native styeld  */
  margin: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 0;
}

li {
  padding: 6px 12px;
  font-size: 20px;
  border-radius: 16px;
      border: 1px solid #9db4d6;
}

li.active {
  background-color: #133275;
  color: white;
  border: 1px solid #133275;
}

<!DOCTYPE html>
<html>

<head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <link href="src/styles.css">
</head>

<body>
    <div class="container">

        <ul>
            <li class="active">First tab</Item>
            <li>Second tab</Item>
        </ul>
  </div>
    
</body>

</html>

Answer 4

回答我自己的问题。使用 box-shadow 而不是边框。

body {
  font-family: sans-serif;
}

.container {
  display: flex;
  justify-content: center;
  zoom: 2; /* just to see it better */
}

ul {
  list-style: none;
  display: flex;
  display: flex;
  list-style: none;
  box-shadow: 0 0 0 1px #133275; /* added this */
  /* border: 1px solid #133275;  Removed this */
  border-radius: 17px; /* Adjusted from 16 to 17*/
  background-color: #9db4d6;
  /* overflow: hidden; Removed this*/ 

  /* To reset browser native styles  */
  margin: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 0;
}

li {
  padding: 6px 12px;
  font-size: 20px;
  border-radius: 16px;
}

li.active {
  background-color: #133275;
  color: white;
}

<html>
  <body>
    <div class="container">
      <ul>
        <li class="active">First tab</Item>
        <li>Second tab</Item>
      </ul>
    </div>
  </body>
</html>

Answer 5

另一个解决方案是从外侧移除第一个和最后一个子半径，因为你在 ul 中隐藏了溢出。如果您有三个或更多元素，则第一个和最后一个之间的所有元素都有完全圆角。

   body {
      font-family: sans-serif;
    }

    .container {
      display: flex;
      justify-content: center;
      zoom: 2; /* just to see it better */
    }

    ul {
      list-style: none;
      display: flex;
      display: flex;
      list-style: none;
      border: 1px solid #133275;
      border-radius: 16px;
      background-color: #9db4d6;
      overflow: hidden;
      /* To reset browser native styles  */
      margin: 0;
      margin-block-start: 0;
      margin-block-end: 0;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 0;
    }

    li {
      padding: 6px 12px;
      font-size: 20px;
      border-radius: 13px;
    }

    li.active {
      background-color: #133275;
      color: white;
    }

    ul li:first-child {
      border-radius: 0 16px 16px 0;
    }
    ul li:last-child {
      border-radius:16px 0 0 16px;
    }


**Two tabs:**

         <div class="container">
         <ul>
            <li>First tab</li>
            <li class="active">Second tab</li>
          </ul>
</div>




         <div class="container">
         <ul>
            <li>First tab</li>
            <li>Second tab</li>
            <li class="active">Third tab</li>
            <li>Fourth tab</li>
          </ul>
</div>

CSS 圆角边框在边框和内容之间留有空隙

CSS rounded border leaves a gap between border and content

html

css