CSS侧边导航栏相邻标签圆角及阴影排除当前项实现咨询

问题描述 #

我此前从未咨询过CSS相关问题，在此提前致歉。

当前我的导航栏效果如下图：

点击查看全尺寸图片

我需要实现两个核心需求：

• 为当前选中标签的上下相邻标签添加对应圆角（示例图中当前标签为「Our Catalogue」，上下相邻标签为「Suggestions」和「About Us」）
• 为整个导航栏右侧添加阴影，但排除当前选中的标签

补充说明：我使用jinja2框架开发，当前选中标签是动态的，无法硬编码圆角样式。

需求1我暂无实现思路，需求2我已做过尝试，但效果并不理想，结果如下图：

我希望去除生硬的转角，相关效果问题见下图：

现有代码 #

样式表代码 #

:root {
    /* 配色方案 */
    --cream : hsl(40, 100%, 96%);
    --cream-light:hsl(40, 100%, 98%);
    --coffee: hsl(40,  14%, 62%);
    --purple: hsl(258, 14%, 62%);
    --dark  : hsl(109,  7%, 33%);
    --green : hsl(128, 30%, 42%);
    --green2: hsl(140, 15%, 55%);
    --green2-dark: hsl(140, 11%, 36%);

    /* 阴影配置 */
    --shadow-in: inset 1px .15rem .3rem -.1rem rgba(50, 50, 93, 0.25), inset 1px .1rem .2rem -.1rem rgba(0, 0, 0, 0.3), inset -1px -1px .3rem -.1rem rgba(50, 50, 93, 0.25), inset -1px -1px .2rem -.1rem rgba(0, 0, 0, 0.3);
    --shadow-nav: .3rem 0 .6rem -.2rem rgba(50, 50, 93, 0.25), .2rem 0 .4rem -.2rem rgba(0, 0, 0, 0.3);
    --shadow-current: inset .3rem .3rem .6rem -.2rem rgba(50, 50, 93, 0.25), inset .2rem .2rem .4rem -.2rem rgba(0, 0, 0, 0.3);
    --shadow-hover: inset 1px .3rem .6rem -.2rem rgba(50, 50, 93, 0.25), inset 1px .2rem .4rem -.2rem rgba(0, 0, 0, 0.3), inset -1px -1px .6rem -.2rem rgba(50, 50, 93, 0.25), inset -1px -1px .4rem -.2rem rgba(0, 0, 0, 0.3);

    /* 主题配置 */
    --nav-bg   : var(--green2-dark);
    --nav-text : white;
    --nav-hover: hsl(140, 11%, 27%);
    --main     : var(--cream );
    --text     : var(--dark  );
    --highlight: var(--green);
    --card     : var(--cream-light);
}
html, body {
    margin: 0;
    font-size: 1.5vw;
    background: var(--nav-bg);
    transition: all .5s ease;
}
a {
    color: var(--text);
    text-decoration: none;
}
a:hover {
    color: var(--green);
}
nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 18%;
    height: 100vh;
    /*box-shadow: var(--shadow-nav);*/
    /*box-shadow: .3rem 0 .6rem rgba(50, 93, 50, 0.25), .2rem 0 .4rem rgba(0, 0, 0, 0.3);*/
    background: var(--nav-bg);
}
nav h2 {
    margin: 0;
    padding: 10%;
    padding-right: 0 !important;
    height: 1.8rem;

    background: var(--nav-bg);
    color: var(--nav-text);
    transition: margin .5s, padding .5s, border .5s, background .5s, color .3s;
}
/*nav div.current {
    width: 100%;
    padding-right: .9rem;
    background: linear-gradient(90deg, hsl(140, 11%, 36%) 50%, hsl(40, 100%, 96%) 50%);
}
nav div.current:hover {
    padding-right: 0;
}*/
nav h2.current {
    margin-left: 5%;
    padding-left: 5%;
    border-radius: .5rem 0 0 .5rem;
    box-shadow: var(--shadow-current);
    background: var(--main);
    color: var(--text);
}
nav h2:hover {
    margin: 0;
    padding: 10%;
    padding-left: 15%;
    border-radius: 0;
    box-shadow: var(--shadow-hover);
    background: var(--nav-hover);
    color: var(--nav-text);
}
main {
    padding-left: 22.5%;
    padding-right: 7.5%;
    min-height: 100vh;

    background: var(--main);
    color: var(--text);

    display: flex;
    flex-direction: column;
}
main h1 {
    color: var(--green2);
}
footer {
    margin-top: auto;
    margin-bottom: .35rem;
    padding: .25rem;
    padding-right: 2.5rem;
    border-radius: .25rem;

    font: .5rem sans-serif;
    text-align: right;

    background: hsl(40, 39%, 90%);
    box-shadow: var(--shadow-in);
}

layout.html 文件代码 #

<!DOCTYPE html>
<html lang='en'>
<head>
    <title>Library</title>
    <meta charset='UTF-8'>
</head>
<body>
    <nav>
        {% include 'navigation.html' %}
    </nav>
    <main>
        {% block main %} {% endblock %}
        <footer>Copyright 2021 mightbesimon | github.com/mightbesimon</footer>
    </main>
</body>
</html>

navigation.html 文件代码 #

{% for url, name in (('/'           , 'Home'         ),
                     ('/register'   , 'Register'     ),
                     ('/login'      , 'Login'        ),
                     ('/suggestions', 'Suggestions'  ),
                     ('/catalogue'  , 'Our Catalogue'),
                     ('/aboutus'    , 'About Us'     ),
                     ('/contact'    , 'Contact'      ),
) %}
    <a href="{{ url }}">
        <!-- <div {% if url_for(request.endpoint, **request.view_args)==url %} class="current" {% endif %}> -->
            <h2 {% if url_for(request.endpoint, **request.view_args)==url %} class="current" {% endif %}>
                {{ name }}
            </h2>
        <!-- </div> -->
    </a>
{% endfor %}

内容的提问来源于stack exchange，提问作者mightbesimon