Я пытаюсь добавить тень к div.lo go, но он не работает - PullRequest
Новая
       4

Я пытаюсь добавить тень к div.lo go, но он не работает

0 голосов
/ 03 февраля 2020

Я попытался посмотреть в Google, но не смог найти ничего подходящего. Я думаю, это потому, что я преобразовал его в масштаб 1.1, но тогда разве тень не должна увеличиваться в размере вместе с ним? вопросы, дайте мне знать.

Ответы [ 2 ]

1 голос
/ 03 февраля 2020

Здравствуйте, пожалуйста, попробуйте сделать это css, если вы согласны. 

#main-nav .container .logo {
    box-shadow: 0px 0px 10px 1px #000;
}
0 голосов
/ 03 февраля 2020 
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;
}
<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>
...