盒子的影子没有出现

Question

我一直在这个网站上寻找一些解决我的问题的方法，但似乎没有任何工作。这个 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;


}

Answer 1

你的问题是你的盒影CSS的语法有误

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

在它需要的地方。box-shadow: 10px 10px 30px #000000;

如果CSS遇到它不理解的属性它就会默默地忽略它，认为它是一个无效的属性。它不会抛出任何形式的错误。

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

jsfiddle上的语法高亮也显示了这个问题，因为它没有显示正确的颜色。

Answer 2

更改box-shadow(-10px -10px 30px #000000); -> box-shadow: -10px -10px 30px #000000。

盒子的影子没有出现

问题描述投票：0回答：2

2个回答

最新问题

盒子的影子没有出现

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2