删除圆角面包屑的左右背景颜色
问题描述:
我设置了用于导航的圆角面包屑。如何删除左侧和右侧的背景,如下图所示。删除圆角面包屑的左右背景颜色
.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>
答
检查这个fiddle
.tabs {
overflow: hidden;
background: #eee;
display: inline-block;
border-radius: 30px;
}
答
添加边框半径的标签。
.tabs {
background: #eee;
border-radius: 30px;
overflow: hidden;
}
+0
我太专注于一个标签。谢谢大家。 – Gene9y
答
您可以设置所需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>
使用...伪元素的第一个孩子和最后一个孩子。 –