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似乎有效

Answer 1

记住一些事情并与他们一起玩。 1.大小调整 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;
}

Answer 2

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 3

我之所以来到这个线程，是因为我正在寻找一种解决方案，该方案需要为具有多个网格项目的网格区域设置阴影。实际上，我最终找到了一个不错的解决方案。实际上，您可以在同一网格区域中包含多个元素。这样，您可以将div或伪元素放置在与您所在区域相同的位置“之前”或“之后”，并为其阴影。

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; }

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类。否则，您还可以根据媒体查询来创建这些区域并将它们与正确的区域对齐。

Answer 4

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

.my_grid {
  display: grid;
}

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

在css网格区域的箱子阴影

4 个答案: