只有一个Li元素的圆角?

时间:2012-11-07 20:34:14

标签: list navigation rounded-corners rounding nav

我正在尝试在导航菜单上创建一个圆形(右下角)。 我有一个标有“main-nav”的ul ID,我创建了一个标有“round”的li类。 我将这个李类添加到音乐链接以获得圆角,但没有任何反应。

这是一个小提琴// http://jsfiddle.net/2qRLU/3/

1 个答案:

答案 0 :(得分:1)

你写了.round li这将尝试使用“round”类来嵌套嵌套在元素中的列表项。

你需要写li.round这个目标列出了“圆”类的项目。

请注意,空格很重要,编写li .round是错误的,因为这会定位具有“圆”类的列表项的子项。

http://jsfiddle.net/2qRLU/4/


如果您想单独设置角落样式,可以使用更具体的版本:

border-top-left-radius:5px;
border-top-right-radius:10px;
border-bottom-left-radius:15px;
border-bottom-right-radius:20px;

我在这里设计了它们以显示不同的类型,但实际上你可能只想设计一个角落,所以这里是你的小提琴的一个版本,只有右下角弯曲:http://jsfiddle.net/2qRLU/6/ < / p>


另外,作为旁注,除非您需要支持旧版本的浏览器,否则只需编写border-radius而不使用所有供应商前缀即可。浏览器暂时不需要border-radius的供应商前缀。

您可以在此处对浏览器中的前缀进行测试:http://jsfiddle.net/2qRLU/5/