css - 盒子阴影不出现

问题描述

我一直在这个网站上寻找一些解决我问题的方法，但似乎没有任何效果。参考This JSFiddle我试图在深灰色 div 的顶部和底部周围获得内部阴影。我尝试从 flex 更改为相对位置、z-index、顺序、各种溢出选项和阴影过滤器。

<!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;


}

标签： cssbox-shadow

您的问题是您的 box-shadow CSS 的语法错误

你有它喜欢：box-shadow(10px 10px 30px #000000);

它需要在哪里：box-shadow: 10px 10px 30px #000000;

如果 CSS 遇到它不理解的属性，那么它只是默默地忽略它并认为它是无效的属性。它不会引发任何类型的错误。

在 Chrome 的开发工具中，无效属性是这样的：有一个警告标志，表明它是一个未知的属性名称。

jsfiddle 上突出显示的语法也显示了问题，因为它没有显示正确的颜色

css - 盒子阴影不出现

问题描述

解决方案

推荐阅读