重点是我的标题应该有一个盒子阴影。但是,即使在标头组件 box-shadow: 0 0 15px rgba(0, 0, 0, 0.3) 中定义了它,它也不会显示。如果降低标题的高度,您将看到框阴影。标题高度应为 70 像素(包括框阴影)。我究竟做错了什么?
Stackblitz 链接:https://stackblitz.com/edit/stackblitz-starters-rhsyz2? file=src%2Fmain.ts
最相关的代码:
// styles.scss
* {
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
}
body {
margin: 0;
}
//app.component.html
<div class="grid-box">
<div class="nav"></div>
<app-header class="header"></app-header>
<div class="content"></div>
</div>
//app.component.scss
.grid-box {
display: grid;
width: 100%;
height: 100%;
grid-template-areas: "nav header" "nav content";
grid-template-columns: 100px auto;
grid-template-rows: 70px auto;
}
.nav {
grid-area: nav;
background-color: blue;
}
.header {
grid-area: header;
background-color: #777;
}
.content {
grid-area: content;
background-color: red;
}
// header.component.html
<div>header</div>
// header.component.scss
div {
background-color: #fff;
height: 100%;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}