Question

我将border与border-radius一起应用于li。背景应用于a。问题是a角落仍然出现。

除了以下内容，你能想到任何解决方案吗？

两种可能的解决方案：

使用overflow:hidden。 此解决方案不适用于我当前的布局，因此我需要其他解决方案。
将border-radius同时应用于li和a。 这是我目前唯一的解决方案，但我至少需要减少项目中的css代码......

注意：标签布局是完美的像素，所以我使用的是这种方法。

body {
  background:#eee
}
ul {
  margin: 0;
  padding: 0;
}
ul li {
  display: inline-block;
  list-style: none;
  position: relative;
  border:1px solid #aaa;
  border-bottom:0;
  border-radius:5px 5px 0 0;
  vertical-align:bottom;
}
ul li a {
  padding: 10px 15px;
  display: block;
  line-height: 25px;
  margin-bottom:-1px;
}
ul li.active a {
  background:#fff;
}

.content {
  border:1px solid #aaa;background:#fff;height:200px
}

<ul>
    <li class="active"><a href="#">tab 1</a></li>
    <li><a href="#">tab2</a></li>
    <li><a href="#">tab3</a></li>
    <li><a href="#">tab4</a></li>
  </ul>
  <div class="content"></div>

Answer 1

Fiddle

body {
  background:#eee
}
ul {
  margin: 0;
  padding: 0;
}
ul li {
  display: inline-block;
  list-style: none;
  position: relative;
  vertical-align:bottom;
}
ul li a {
  padding: 10px 15px;
  display: block;
  line-height: 25px;
  margin-bottom:-1px;
  border:1px solid #aaa;
  border-bottom:0;
  border-radius:5px 5px 0 0;
}
ul li.active a {
  background:#fff;
}

.content {
  border:1px solid #aaa;background:#fff;height:200px
}

Answer 2

唯一的方法是将border-radius应用于父级和子级。我不认为这是一个主要问题，看起来你看起来没有太多的CSS。

我猜你可以通过使用两个由,分隔的选择器来减少CSS的数量，如果你还没有这样做的话。

如果您不需要专门针对子锚点的背景，您可以像@Phylogenesis所说的那样将其应用于父级。

Answer 3

如果您不想编辑＆＃34; a＆＃34; 的样式，那么解决方案是强制孩子继承父母样式：

ul li * {border-radius:5px 5px 0 0;}

带背景的内部div不受具有border-radius的外部div的影响

3 个答案: