圆形曲线选项卡| CSS

时间:2014-01-17 11:02:02

标签: html css html5

嗨,我想在CSS中使用圆角标签,所有浏览器都应支持..

以下是我试过的链接..

http://learneveryday.net/demo/css/menu/tabmenu1/

一切正常......但圆角不会来......

以下是该代码的HTML代码。

<ul id="navtabs">
    <li class="cat-item cat-item-8"><a href="#">Blogging</a></li>
    <li class="cat-item cat-item-6 current-cat"><a href="#">Branding</a></li>

    <li class="cat-item cat-item-10"><a href="#">Freelancing</a></li>
    <li class="cat-item cat-item-3"><a href="#">Marketing</a></li>
    <li class="cat-item cat-item-5"><a href="#">Web Design</a></li>
</ul>

当我打开CSS时,它们包含图像。我无法找到..

让我知道在哪里可以获得图片

5 个答案:

答案 0 :(得分:2)

尝试将-webkit用于chrome,将-moz用于Mozilla

.RoundBorder
{
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

答案 1 :(得分:2)

您需要使用border-radius来获得圆角。

具体为border-top-left-radiusborder-top-right-radius

请参阅此jsFiddle以获取示例

答案 2 :(得分:1)

如果您的浏览器支持,则只能使用css:

-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;

Radius发生器:http://border-radius.com/

兼容性列表:http://caniuse.com/border-radius

或者您可以使用精灵图像:http://css-tricks.com/css-sprites/

答案 3 :(得分:0)

试试这个:

    <ul class="round" id="navtabs">
<li class="cat-item cat-item-8"><a href="#">Blogging</a></li>
<li class="cat-item cat-item-6 current-cat"><a href="#">Branding</a></li>

<li class="cat-item cat-item-10"><a href="#">Freelancing</a></li>
<li class="cat-item cat-item-3"><a href="#">Marketing</a></li>
<li class="cat-item cat-item-5"><a href="#">Web Design</a></li>

    .round { -webkit-border-radius:6px;}

答案 4 :(得分:0)

使用border-radius:7px 7px 0 0;执行此操作。对于任何新浏览器,您都不需要-webkit-