Question

我尝试在Google上查找，但找不到任何相关内容。我认为这是因为我将其转换为1.1比例，但是阴影是否也应该随之增加？

 <body>
    <div id="landing">
        <nav id="main-nav">
            <div class="container">
            <div class="logo">
                <a href="#"><img src="./img/logo_final-final.png" alt=""></a>
            </div>
            <div class="nav-btns btns-container">
                <div><a href="#">Home</a></div>
                <div><a href="#">Store</a></div>
                <div><a href="#">Offers</a></div>
                <div><a href="#">FAQs</a></div>
                <div><a href="#">Contact Us</a></div>
            </div>
            </div>
        </nav>
    </div>
</body>

CSS- *{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a{
  text-decoration: none;
}

#landing{
  position: absolute;
  width: 100vw;
  height: 100vh;
  background: url(/html/img/landing\ background.png) no-repeat center center/cover;
}

#main-nav{
  position: relative;
  top: 5%;
  margin: auto;
  width: 90%;
  background: #007FFF 0% 0% no-repeat padding-box;
  box-shadow: 0px 10px 40px #00000029;
  border-radius: 40px;
  opacity: 0.9;
}

#main-nav *{
  border: 1px black soli
}
#main-nav .container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

#main-nav .container .logo {
  width: 7%;
  height: 5%;
  background-color: #FFFFFF;
  border-radius: 3rem;
  transform: scale(1.1);
  z-index: 2;
  box-shadow: 5px 10px #00000029;
}

#main-nav .container .logo img{
  position: relative;
  max-width: 100%;
  height: auto;
}

我不知道要写多少细节，所以如果您有任何问题请告诉我。

Answer 1

您好，如果您同意，请尝试执行此CSS。

#main-nav .container .logo {
    box-shadow: 0px 0px 10px 1px #000;
}

Answer 2

#include "foo.h"

int main ()
{
    //Foo foo; <-- error
    FooLongNameSpecialisationsParamaters foo;

    return 0;
}

it looks like the shadow to div.logo works fine

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a{
  text-decoration: none;
}

#landing{
  position: absolute;
  width: 100vw;
  height: 100vh;
  background: url(/html/img/landing\ background.png) no-repeat center center/cover;
}

#main-nav{
  position: relative;
  top: 5%;
  margin: auto;
  width: 90%;
  background: #007FFF 0% 0% no-repeat padding-box;
  box-shadow: 0px 10px 40px #00000029;
  border-radius: 40px;
  opacity: 0.9;
}

#main-nav *{
  border: 1px black soli
}
#main-nav .container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

#main-nav .container .logo {
  width: 7%;
  height: 5%;
  background-color: #FFFFFF;
  border-radius: 3rem;
  transform: scale(1.1);
  z-index: 2;
  box-shadow: 5px 10px #00000029;
}

#main-nav .container .logo img{
  position: relative;
  max-width: 100%;
  height: auto;
}

我正在尝试为div.logo添加阴影，但是它不起作用

2 个答案: