个人中心
gpt4 book ai didi

html - 盒子阴影不显示

转载 作者：行者123 更新时间：2023-11-27 23:48:28 26 4
gpt4 key购买 nike

由于某些未知原因，我的框阴影没有显示。
我已经为此工作了一整天，但找不到解决方案。我删除了背景图像，但仍然看不到阴影。我也尝试了 -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/

26 4 0
文章推荐： c++ - 基于用户表达式在编译时参数化函数
文章推荐： javascript - 在 Canvas HTML 中绘制文本会停止我的算法
文章推荐： c++ - 如何设置按钮(包括复选框按钮)的背景颜色？
文章推荐： php - 如何将 "reply-to"添加到我们从网站 PHP 表单获取的电子邮件中？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com