圆形元素上的框阴影

Question

我正在尝试在我的circle元素上实现box-shadow，以使其与整个导航栏匹配，但是我只想使其位于圆的底部。我试图更改z-index并将其隐藏在该导航栏下，但是它没有用。

我该怎么办？

这是CSS和HTML代码：

nav.navbar {
    font-family: var(--montserrat);
    position: fixed;
    top: 0;
    width: 100vw;
    height: 60px;
    background-color: white;
    box-shadow: 0px 10px 5px 0px rgba(0,0,0,0.36);
    z-index: 10;
}

nav.navbar div.navbar-element {
    display: flex;
    height: 100%;
    width: 100%;
}
nav.navbar > div.navbar-element div.logo-wrapper {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    margin: auto;
    background-color: white;
    position: relative;
    margin-top: -10px;
}

nav.navbar > div.navbar-element div.logo-wrapper img {
    width: 80%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
<nav class="navbar">
    <div class="navbar-element">
        <div class="site-part">O nas</div>
        <div class="site-part">Oferta</div>
        <div class="logo">
            <div class="logo-wrapper">
                <img src="./../images/logo.jpg" alt="logo">
            </div>
        </div>
        <div class="site-part">Realizacje</div>
        <div class="site-part">Kontakt</div>
    </div>
</nav>

Answer 1

<style type="text/css">
nav.navbar {
    font-family: var(--montserrat);
    position: fixed;
    top: 0;
    width: 100vw;
    height: 60px;
    background-color: white;
    box-shadow: 0px 10px 5px 0px rgba(0,0,0,0.36);
    z-index: 10;
}

nav.navbar div.navbar-element {
    display: flex;
    height: 100%;
    width: 100%;
}
nav.navbar > div.navbar-element div.logo-wrapper {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    margin: auto;
    background-color: white;
    position: relative;
    margin-top: -10px;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1), 0 4px 10px 0 rgba(0, 0, 0, 0.16);
}

nav.navbar > div.navbar-element div.logo-wrapper img {
    width: 80%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
</style>
<nav class="navbar">
    <div class="navbar-element">
        <div class="site-part">O nas</div>
        <div class="site-part">Oferta</div>
        <div class="logo">
            <div class="logo-wrapper">
                <img src="./../images/logo.jpg" alt="logo">
            </div>
        </div>
        <div class="site-part">Realizacje</div>
        <div class="site-part">Kontakt</div>
    </div>
</nav>

经过测试和工作。

Answer 2

我建议仅在导航栏上创建一个div outside，在该div上添加一个阴影框，设置边框半径以使div成为一个圆形，然后将其放置在徽标下方。举个例子：（我硬编码了一些东西，只是为了将它们快速组合在一起。）

.box-shadow {
     width: 75px;
     height: 75px;
     border-radius: 50%;
     box-shadow: 0 15px 8px 8px rgba(0,0,0,0.36);
     position: absolute;
     top: 4%;
     left: 9%;
     z-index: -1;
     transform: translateX(-50%) translateY(-60%);
  }

关于CSS的妙处在于，您可以尽情摆弄自己的内心，直到它完全符合您的要求。