CSS Dropdown - 仅半径左右边缘

Question

希望这对某人来说很容易。我已经构建了一个CSS下拉列表，并希望添加一个半径来围绕整个菜单的角落。我用过：

border-radius: 0px;

...添加半径，但我必须将它放在错误的位置，因为它会舍入每个菜单选项。我已尝试过不同的地点，但无法弄清楚如何对其进行排序。

我已经把它放在jsfiddle：http://jsfiddle.net/Flamin_Squirrel/noxqn7z4/6/

感谢。

Answer 1

您可以执行以下操作：http://jsfiddle.net/zbwz0jxo/

使用伪类first-child和last-child，如下所示：

.menu > ul >li:first-child {
  border-radius: 5px 0px 0px 5px;
}

.menu > ul >li:last-child {
  border-radius:0px 5px 5px 0px;
}

这样，您只能将border-radius应用于菜单的第一个和最后一个列表项。

有关first-child和last-child伪类的更多信息，请查看MDN here和here。与nth-child等伪类结合使用，可以更好地控制CSS选择器。

Answer 2

添加此项（并删除现有的border-radius规则）：

.menu > ul > li:first-child {
    border-radius: 10px 0 0 10px ;
}
.menu > ul > li:last-child {
    border-radius: 0 10px 10px 0;
}

<强> jsFiddle example

Answer 3

你应该将border-radius代码放在.menu内，因为那是你想要圆角的元素。