html - 将半径 Angular 应用到菜单的末尾而不是每个元素

Question

这是我的菜单 -

<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;
}

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

Answer 1

第一个 li 和最后一个有不同的类，例如 first 和 last，first with left top and bottom last with right顶部和底部

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>