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

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

检查这个fiddle

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

Answer 2

添加边框半径的标签。

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

Answer 3

您可以设置所需border-radius父元素和子元素中删除。

在您的.active类中，将border-radius值更改为inherit以使其父元素中声明的属性具有相同的值。如果您决定更改父母的border-radius，这将使您无需在.active课程中更改它。

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