CSS网格区域上的盒子阴影

Question

我在一个网格区域中有一个侧边栏，我正在尝试对其应用盒子阴影。但似乎不起作用。是否有解决方法？

#wrapper {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "sidebar content";
    height: 100%;
    @include media-breakpoint-down(sm) {
        grid-template-columns: auto;
        grid-template-areas: "sidebar" "content";
    }
}

#sidebar {
    grid-area: sidebar;
    background: $white;
    box-shadow: 2px 2px 2px black; //this doesn't work
    padding: 2rem 1rem;
    .nav-title {
        display: none;
    }
    &.show {
        min-width: 250px;
        .nav-title {
            display: inline;
            margin-left: .5rem;
        }
    }
    @include media-breakpoint-down(sm) {
        display: none;
        &.show {
            padding: .5rem .5rem;
            display: block;
        }
    }
}

#content {
    grid-area: content;
    background-color: #e9f2f7;
}

文档中似乎没有提到这种情况行不通，虽然border-right似乎可以正常工作。

- Sandra Willford

---

我有同样的问题。Chrome开发者工具显示“无效的属性值”。 - Patrick M.

Answer 1

尝试为网格中具有阴影的区域设置position: relative;。

.my_grid {
  display: grid;
}

.shadowed_panel {
  box-shadow: 10px 5px 5px grey;
  position: relative;
}

- DenisKolodin

---

正确的解决方案。 - Dreamoon

这对我有用，有人能解释一下为什么吗？ - Matias

Answer 2

记住以下几点并加以运用： 1. box-sizing（盒模型） 2. z-index（层级）

这是一个可工作的演示：

https://codepen.io/fearless23/pen/yEjGOe?editors=1100

代码如下：

HTML:

<section>
  <header></header>
  <aside></aside>
  <main></main>
</section>

CSS：

section {
  display: grid;
  grid-template-columns: 10.18em 1fr;
  grid-template-rows: 3em 1fr;
  grid-template-areas: "header header" "sidebar content";
  height: 100vh;
}

header {
  box-sizing: border-box;
  grid-area: header;
  background: #00a8e8;
  padding: 1rem 1rem;
}

aside {
  grid-area: sidebar;
  background: #f5f5f5;
  z-index: 100;
  box-shadow: 3px 0px 2px rgba(0,0,0,0.5); 
  padding: 2rem 1rem;
}

main {
  grid-area: content;
  background-color: #efefef;
  padding: 2rem 1rem;
}

- Jassi

Answer 3

我来到这个帖子是因为我正在寻找一种在多个网格区域中设置阴影的解决方案。最终，我找到了一个好的解决方案。实际上，您可以在同一个网格区域中有多个元素。通过这种方式，您可以在与您的区域相同的位置放置一个 div 或伪元素 'before' 或 'after' ，并给它一个阴影。

section {
  margin: 20px;
  
  display: grid;
  grid-template-columns: 75px 75px;
  grid-template-rows: 75px 75px;
  grid-template-areas: "one two" "three two";
  grid-column-gap: 10px;
}

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid green;
}

.one { grid-area: one; }

.two {
  grid-area: two;
  box-shadow: 1px 2px 6px 2px rgba(0, 0, 0, 1);
}

.three { grid-area: three; }

/* this before is placed on grid areas one and three */
section::before {
  content: "";
  
  grid-row-start: 1;
  grid-row-end: span 2;
  grid-column: 1;
  
  box-shadow: 1px 2px 6px 2px rgba(0, 0, 0, 1);
}

<section>
  <div class="box one">
    <span>1</span>
  </div>
  <div class="box two">
    <span>2</span>
  </div>
  <div class="box three">
    <span>3</span>
  </div>
</section>

如果您只需要一个或两个阴影区域，我想您可以使用 before 和 after 类。否则，您也可以创建 div 并根据媒体查询将其对齐到正确的区域。

- W4ldi

---

我想知道为什么直接将阴影应用于同一网格区域中的单元格时不起作用，而这种方法却有效。编辑：显然，这是因为z-index的应用方式不同。 - Tom

谢谢你提供这个好主意，我建议使用 :after，当使用 sticky 时，应该在父元素和 :after 元素上都使用。 - user1928596

非常惊人的回答！+1！ - undefined

Answer 4

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
  box-shadow: 5px 10px;
}
.grid-container>div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding:20px 0;
  font-size: 30px;
  box-shadow: 5px 10px;
}
.item1 {
  grid-area: 2 / 1 / span 2 / span 3;
  box-shadow: 5px 10px;
}

<h1><a href="#">Software Expert</a></h1>

<p>You can use the <em>grid-area</em> property to specify where to place an item.</p>

<p>The syntax is grid-row-start / grid-column-start / grid-row-end / grid-column-end.</p>

<p>Item1 will start on row 2 and column 1, and span 2 rows and 3 columns:</p>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
</div>

- Vikrant Gupta

---

解释会极大地改善这个答案。 - erikvimz