仅在一个李元素上圆角



我正在尝试在导航菜单上创建一个回合(右下角)角。我有一个标记为" main-nav"的UL ID,并创建了一个标有" round"的LI类。我在音乐链接中添加了这个Li课程以获取圆角,但什么也没发生。

这是小提琴//http://jsfiddle.net/2qrlu/3/

您写了.round li,这将尝试针对"圆形"类嵌套在元素中的列表项目。

您需要编写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/


另外,作为旁注,除非您需要支持浏览器的较旧版本,否则仅在没有所有供应商前缀的情况下编写Border-Radius就足够安全。浏览器现在不需要Border-Radius一段时间了。

您可以在此处没有浏览器上的前缀进行测试:http://jsfiddle.net/2qrlu/5/

相关内容

  • 没有找到相关文章

最新更新