圆形元素上的框阴影

Question

我正在尝试在我的圆形元素上实现框阴影以使其与整个导航栏相匹配，但我只想将其设置在圆形的底部。我试图更改 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 外部添加一个框阴影 div，将 border-radius 设置为使 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 的美妙之处在于，您可以 fiddle 随心所欲，直到完全如您所愿。

圆形元素上的框阴影

box-shadow on circle element

html

css

z-index

box-shadow