如何让盒子阴影出现在不同的元素下答案

【问题标题】：How do I get a box shadow to appear under different elements如何让盒子阴影出现在不同的元素下
【发布时间】：2021-09-26 04:56:32
【问题描述】：

我正在尝试从圆形中获取 css 框阴影，以显示在图像本身下方的导航栏下方。目前我可以让图像创建一个出现在导航栏顶部的阴影，但我希望它看起来是一个对象。

我尝试在“.logo”类上使用 :before 并将阴影放在不同的 z-index 上，但这只会使阴影消失。我对网络东西（以及堆栈溢出）相当陌生，因此将不胜感激。

这是我正在使用的 css，问题在于徽标类

html{
    overflow-y: scroll;
}
body {
    font-family: "Arial", Helvetica, sans-serif;
    font-weight: bold;
    font-size: 20px;
    color: #DCDCDC;
    background-color: #222035;
    margin: 0px;
}
.centered {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
}
.logo {
    position: relative;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: 100%;
}
.logo:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    border-radius:100%;
    box-shadow: 0 2vh 5vh #000000;
}
.topnav {
    box-shadow: 0px 2vh 5vh #000000;
    width: 100%;
    height: 15vh;
    background-color: #222035;
}
 
header {
    padding: 170px;
}

以及 HTML 的其余部分

<!DOCTYPE html>
<html lang="en-UK">
    <head>
        <title>WOW</title>
        <link rel="icon" href="icon.png">
        <link rel="stylesheet" href="styles.css">
    </head>
    
    <body>

        <nav class="topnav">
        <img class = "logo" src="icon.png"></nav>
        
    </body>

【问题讨论】：

你能分享一个codepen链接吗？
codepen.io/FlippyFishy/pen/bGNYLrb是这个意思吗？
也许图像应该只是一个带有margin: autocodepen.io/toniweb/pen/rNwqRXN的block元素
这并没有真正做到我想要的。我仍然希望图像在原处，我只需要阴影在导航栏下方而不是在导航栏上方

标签： html css

【解决方案1】：

您可以在nav 本身上使用过滤器：filter:drop-shadow(0px 2vh 5vh #000000);，而不是box-shadow。

drop-shadow() 遵循容器的形状，而box-shadow 遵循容器的原始形状（矩形）。

见：https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow()

例子

html {
  overflow-y: scroll;
}

body {
  font-family: "Arial", Helvetica, sans-serif;
  font-weight: bold;
  font-size: 20px;
  color: #DCDCDC;
  background-color: #222035;
  margin: 0px;
}

.centered {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
}

.logo {
  position: relative;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: 100%;
}

.logo:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  border-radius: 100%;
}

.topnav {
  filter: drop-shadow(0px 3px 5px #fff);/* make it obvious for the demo */
  width: 100%;
  height: 15vh;
  background-color: #222035;
}

header {
  padding: 170px;
}

<nav class="topnav">
  <img class="logo" src="https://i.ibb.co/1bkLMQt/Suit-Yourself-logo-2.png">
</nav>

【讨论】：

效果很好，谢谢！