Тень от коробки не появляется - PullRequest
Новая
       90

Тень от коробки не появляется

0 голосов
/ 02 мая 2020

Я был по всему сайту для некоторых решений моей проблемы, но, похоже, ничего не помогло. Обращаясь к Это JSFiddle Я пытаюсь получить внутренние тени, окружающие верх и низ темно-серого div. Я пытался изменить с гибкого на относительное положение, z-индекс, порядок, различные параметры переполнения и фильтры теней. 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="Bespoke">
    </head>
    <body>


<div class="grid">

<!-------- Row 1 ---------->


          <header>
          </header>


<!-------- Row 2 ---------->


           <article>
           </article>


<!-------- Row 3 ---------->   

           <blank>
           </blank>

<!-------- Row 4 ----------> 

           <subtitle>
           </subtitle>

<!-------- Row 5 ---------->   

           <blank2 class>
           </blank2>


<!-------- Row 5 ---------->   

           <footer>
           </footer>



</div>
    </body>
</html>

.grid {
    display: grid;
    grid-template-columns:auto;
    grid-gap: 0em;
    width: 100vw;
    height: 10vw;
}


}

@media all and (max-width: 100vw) {
  aside,
  article {

  }
}


body {
    margin: 0 auto;
    max-width: 100vw;
    background-image: url("https://cff2.earth.com/uploads/2019/08/15135811/Microplastics-are-raining-down-on-the-Rocky-Mountains-730x410.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    color: white;

}


header {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 15vh;
    text-align: center;
    background: rgba(175, 165, 255, 0);
}

article {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30vh;
    text-align: center;
    background: rgba(0, 0, 0, 0);

}

blank {
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 15vh;
    text-align: center;
    background: rgba(205, 225, 105, 0);
    box-shadow(10px 10px 30px #000000);    
    z-index: 10;
}

subtitle {
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20vh;
    text-align: center;
    background-color: #1e1e1e;
    font-size: max(7vw, 20px);
    box-shadow(-10px -10px 30px #000000);         
    z-index: 9;

}

blank2 {
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20vh;
    text-align: center;
    background-color: #fffff7;
    z-index: 8;

}



footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    align-items: center;
    justify-content: center;
    height: 7vh;
    text-align: center;
    background-color: #fffff7;


}

Ответы [ 2 ]

2 голосов
/ 02 мая 2020

Ваша проблема в том, что у вас был синтаксис box-shadow CSS неправильно

У вас было это как: box-shadow(10px 10px 30px #000000);

Где это должно быть: box-shadow: 10px 10px 30px #000000;

Если CSS встречается со свойствами, которые он не понимает, то он просто молча игнорирует его и считает его недействительным свойством. Он не выдает никакой ошибки.

В инструментах dev Chrome вот так выглядит недопустимое свойство: есть предупреждающий знак, указывающий, что это неизвестное имя свойства.

enter image description here

Подсветка синтаксиса на jsfiddle также показывает проблему, так как не показывает правильные цвета enter image description here

1 голос
/ 02 мая 2020

Изменить тень блока (-10px -10px 30px # 000000); -> box-shadow: -10px -10px 30px # 000000;

...