删除圆形面包屑的左右背景颜色

Question

我为导航设置了圆形面包屑。如何删除如下图所示的左右背景。

.tabs {
  overflow: hidden;
  background: #eee;
}
.tabs a {
  color: #363c46;
  float: left;
  width: 135px;
  text-align: center;
  line-height: 50px;
  text-decoration: none;
}
.tabs a.active {
  background: #fefb09;
  border-radius: 30px;
}
.tabs a:first-child {
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
}
.tabs a:last-child {
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  background: #d1d1d1;
  /* to render the right end look */
}

<div class="tabs">
  <a class="active">Item 1</a>
  <a>Item 2</a>
  <a>Item 3</a>
  <a>Item 4</a>
  <a>Item 5 </a> 
</div>

Answer 1

为选项卡添加边框半径。

.tabs {
  background: #eee;
  border-radius: 30px;
  overflow: hidden;
}

Answer 2

检查这个fiddle

.tabs {
overflow: hidden;
background: #eee;
display: inline-block;
border-radius: 30px;
}

Answer 3

您可以将所需的border-radius设置为父元素并从子元素中移除它。

在您的 .active class 中将 border-radius 值更改为 inherit 以使其具有与其父元素中声明的属性相同的值。如果您决定更改父项的 border-radius，这将使您不必在 .active class 中也进行更改。

.tabs {
  overflow: hidden;
  background: #eee;
  border-radius: 30px;
  display: inline-block; /* Needed to display inline but retaining its block characteristics */
}
.tabs a {
  color: #363c46;
  float: left;
  width: 100px; /* Changed for illustration purposes */
  text-align: center;
  line-height: 50px;
  text-decoration: none;
}
.tabs a.active {
  background: #fefb09;
  border-radius: inherit;
}
.tabs a:last-child {
  background: #d1d1d1;
  /* to render the right end look */
}

<div class="tabs">
  <a class="active">Item 1</a>
  <a>Item 2</a>
  <a>Item 3</a>
  <a>Item 4</a>
  <a>Item 5 </a> 
</div>

删除圆形面包屑的左右背景颜色

To remove the left and right background colors for rounded breadcrumbs

css

breadcrumbs

rounded-corners