0

这是我的菜单——

<div ><ul id="menu">
        <li class="one"><a href="http://www.domain.com">Dashboard</a></li>
        <li class="two"><a href="<?php echo bp_loggedin_user_domain() ?>">Profile</a></li>
        <li class="three"><a href="<?php echo bp_loggedin_user_domain() ?>messages">Messages</a></li>
        <li class="four"><a href="<?php echo bp_loggedin_user_domain() ?>friends">Friends</a></li>
        <li><?php bp_adminbar_notifications_menu() ?>
        <ul>
        <li> </li>
        </ul>
        </li>
    </ul>

这是 CSS -

ul#menu li {
    list-style: none;
    float: left;
    margin: 0 0px 0 0;
    background-color: #F8FCFE;
    position: relative;
    z-index: 1;
    border-top-left-radius: 10px 10px;
    border-bottom-left-radius: 10px 10px;

}

ul#menu li a:link, ul#menu li a:visited {
    display: block;
    text-align: center;
    width: 88px;
    height: 53px;
    line-height: 53px;
    font-family: 'Montserrat', sans-serif;
    text-decoration: none;
    font-size: 13px;
    color: black;
    letter-spacing: 1px;
    outline: none;
    float: left;
    background: #F8FCFE;
    border-top-left-radius: 10px 10px;
    border-bottom-left-radius: 10px 10px;
}

我想要的是左边的项目有左上角，左下角半径，最后一个项目有右上角和右下角有半径。所以它看起来像带有半径角的垂直矩形。

4

4 回答 4

0

像这样的 jsFiddle 示例怎么样？

我保持您的 HTML 不变，但将 CSS 更新为：

ul#menu li {
    list-style: none;
    float: left;
    margin: 0 0px 0 0;
}

li.one a{
    border:2px solid #999;
    border-top-left-radius: 10px 10px;
    border-bottom-left-radius: 10px 10px;
    border-right:none;
}
li.two a, li.three a {
    border-top:2px solid #999;
    border-bottom:2px solid #999;
}
li.four a{
    border:2px solid #999;
    border-top-right-radius: 10px 10px;
    border-bottom-right-radius: 10px 10px;
    border-left:none;
}

ul#menu li a:link, ul#menu li a:visited {
    display: block;
    text-align: center;
    width: 88px;
    height: 53px;
    line-height: 53px;
    font-family: 'Montserrat', sans-serif;
    text-decoration: none;
    font-size: 13px;
    color: black;
    letter-spacing: 1px;
    outline: none;
    float: left;
    background: #ccc;

}​
于 2012-04-27T16:50:18.280 回答
0

让第一个li和最后一个有不同的类，例如firstand last，首先是左上和下，最后是右上和下

li.first {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px; }

li.last {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px; }

菜单

<ul id="menu">
<li class="one first"><a href="http://www.domain.com">Dashboard</a></li>
<li class="two"><a href="<?php echo bp_loggedin_user_domain() ?>">Profile</a></li>
<li class="three"><a href="<?php echo bp_loggedin_user_domain() ?>messages">Messages</a></li>
<li class="four"><a href="<?php echo bp_loggedin_user_domain() ?>friends">Friends</a></li>
<li class="last"><?php bp_adminbar_notifications_menu() ?></li>
</ul>
于 2012-04-27T16:40:47.473 回答
0

html:

<ul id="menu">
    <li class="one"><a href="http://www.domain.com">Dashboard</a></li>
    <li class="two"><a href="<?php echo bp_loggedin_user_domain() ?>">Profile</a></li>
    <li class="three"><a href="<?php echo bp_loggedin_user_domain() ?>messages">Messages</a></li>
    <li class="four"><a href="<?php echo bp_loggedin_user_domain() ?>friends">Friends</a></li>
    <li class="five"><?php bp_adminbar_notifications_menu() ?>
    <ul>
    <li> </li>
    </ul>
    </li>
</ul>

CSS：

ul#menu li {
list-style: none;
float: left;
margin: 0 0px 0 0;
background-color: #F8FCFE;
position: relative;
z-index: 1;
border-top-left-radius: 10px 10px;
border-bottom-left-radius: 10px 10px;
overflow:hidden;}

ul#menu li.one {border-radius: 10px 0px 0px 10px;}

ul#menu li.five {border-radius: 0px 10px 10px 0px;}

您可以像这样顺时针指定每个项目的角：左上角、右上角、右下角、左下角。

纠正了直接复制和粘贴到 css 的问题。

于 2012-04-27T16:41:59.253 回答
0

CSS3 允许您为特定子项定义样式。例如：

#menu li:last-child {
 // some def
}

#menu li:first-child {
 // some other definition
}

希望这可以帮助。

于 2012-04-27T18:28:13.217 回答