如何在不同的元素下显示框阴影?

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

我以前试过在class ".logo"把阴影放在不同的z指数上，但这只是让阴影消失了。我对web东西(以及堆栈溢出)相当陌生，所以任何帮助都会很感激。

这是我正在使用的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>

您可以在nav上使用filter: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>

相关内容

最新更新

热门标签：