由于某些未知原因，我的框阴影没有显示。
我已经为此工作了一整天，但找不到解决方案。我删除了背景图像，但仍然看不到阴影。我也尝试了 -webkit、-moz 和 z-index，但无论我做什么，我仍然看不到阴影。
HTML:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Unknown</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="css/basic.css">
<link rel="stylesheet" type="text/css" href="css/navbar.css">
<link rel="stylesheet" type="text/css" href="css/font.css">
<script type="text/javascript" src="js/navbar.js"></script>
</head>
<body>
<font face ="Alex Brush" size="5">
<div id="container">
<div id="paper">
<font color="#fff">
<a href="index.html">
<div id="title"></div>
<p id="asd">Unknown</p>
</a>
</font>
<div id="navbar">
<font color="black">
<div class="topnav" id="myTopnav">
<div id="sub-nav">
<div id="mini-nav-head">
<a id="responds" href="#home" class="active">Home</a>
<a class="icon" onclick="change()"><i class="fa fa-bars"></i></a>
</div>
<a id="respondy" href="#contact">Bouquets</a>
<a id="respond" href="#about">Weddings</a>
<a id="respond" href="#about">About us</a>
<a id="responde" href="mail/contact.php">Contact us</a>
</div>
</div>
</font>
</div>
</div>
</div>
</body>
</html>
CSS (navbar.css):
body {
margin: 0;
font-family: Arial, Helvetica;
}
#sub-nav {
display: flex;
align-items: center;
justify-content: center;
}
.topnav {
border-radius: 4px;
overflow: hidden;
background-color: white;
width: auto;
margin-top: 18%;
}
.topnav a {
height: auto;
width: auto;
padding: 10px;
float: left;
display: block;
color: #000;
text-align: center;
text-decoration: none;
font-size: 100%;
}
#respond, #responds, #respondy, #responde {
padding: 14px 3.5%;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav .icon {
display: none;
}
.icon {
position: relative;
top: 3.5px;
right: 1.8%;
padding: 0;
}
@media screen and (max-width: 865px) {
.topnav a:not(:first-child) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
#respond {
border-bottom: 1px solid black;
/*background-color: yellow;*/
}
#responde {
box-shadow: 10px 10px grey;
position: relative;
z-index: 10;
}
#respondy {
border-bottom: 1px solid black;
border-top: 1px solid black;
/*background-color: yellow;*/
}
.topnav.responsive {
position: relative;
}
.topnav.responsive .icon {
position: absolute;
top: 3.5px;
right: 1.8%;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
#sub-nav {
display: block;
}
.topnav a:hover {
background-color: #fff;
color: black;
}
}
其他 CSS (basic.css):
body, html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
body {
background: url(../img/island.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#container {
margin: 0 auto;
width: 50%; /* Dužina */
height: 100%; /* Visina */
border-radius: 0px; /* Zakrivljenost rubova */
background-color: white; /* Pozadinska boja */
position: relative; /* Relativna pozicija */
z-index: 1; /* z-pozicija */
}
#container #paper {
margin-top: 0px;
margin-left: auto; /* Lijeva i desna margina se automatski rasporede pa je element na sredini */
margin-right: auto; /* Margine ostavljaju prostora izvana */
width: auto; /* Dužina */
height: 25%; /* Visina */
border-radius: 0px; /* Zakrivljenost rubova */
border: none; /* Debljina, veličina i boja margine */
background: url(../img/bouquet.jpg); /* Pozadinska slika */
no-repeat center 0;
max-width: 100%;
position: relative; /* Relativna pozicija */
padding: 1%; /* Padding ostavlj prostor unutra , ali oduzima od visine i dužine */
padding-right: 1.05%;
z-index: 2;
}
#paper{
top: 0px;
}
#title {
top: 0%;
position: absolute;
left: 3.2%;
}
#asd{
position: absolute;
top: -4.5%;
left: 4.9%;
}
#title {
padding-top: 0%;
width: 65px;
height: 18%;
padding-left: 2%;
padding-right: 2%;
border-left: 3px solid #000;
border-right: 3px solid #000;
border-bottom: 3px solid #000;
word-wrap: all;
background-color: #fff;
display: inline-block;
position: absolute;
}
a:link, a:visited, a:hover, a:active {
color: black;
}
@media screen and (max-width: 1210px) {
#container{
width: 70%;
}
}
有什么可以帮助我解决问题的建议吗？
最佳答案
问题是我在 .topnav 中有 overflow: hidden; 阻止了阴影显示，在我用 overflow: visible; 替换它之后； 阴影是可见的。
关于html - 盒子阴影不显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56659083/