Question

出于某种未知原因，我的盒子阴影没有显示。
我已经整整工作了整整一天，找不到解决方案。我删除了背景图片，但仍然看不到阴影。我也尝试使用-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%;
  }
}

有什么建议可以帮助我解决问题吗？

Answer 1

您正在使用哪种屏幕尺寸？

正如我从代码中观察到的那样，只有当屏幕的最大宽度为865px时，才会出现框阴影。

@media screen and (max-width: 865px) {
  #responde {
    box-shadow: 10px 10px grey;
    position: relative;
    z-index: 10;
  }
}

如果无论屏幕大小如何都希望显示框阴影，则应在

之外声明它

#responde{
   box-shadow: 10px 10px grey;
   position: relative;
   z-index: 10;
}

@media screen and (max-width:865px){

}

Answer 2

问题是我在overflow: hidden;中有.topnav可以阻止阴影显示，而在我用overflow: visible;替换阴影之后，阴影可见。

框阴影不显示

2 个答案: