代码之家 › 专栏 › 技术社区 › Franz Wong

“翻译”盒子的盒子阴影落在兄弟盒子上

box-shadow css3 css

Franz Wong · 技术社区 · 7 年前

盒子的影子落在兄弟盒子上。我可以用 z-index 去解决它。但是,如果其中一个框被平移(例如,当鼠标移到上方时向上移动一点),阴影会再次落在兄弟姐妹身上。如何解决这个问题?谢谢。

.container {
  margin: 30px;
  padding: 10px;
}

div.shadow {
  height: 100px;
  width: 100px;
  background-color: #ff0;
  float: left;
  margin: 4px;
}

.shadow {
  position: relative;
}

.shadow:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  box-shadow: 0px 10px 1000px #000;
}

.shadow:hover {
  transform: translateY(-3px);
}

.shadow:hover::after {
  box-shadow: 0px 20px 1500px #000;
}

<div class="container">
  <div class="shadow"></div>
  <div class="shadow"></div>
  <div class="shadow"></div>
  <div class="shadow"></div>
</div>

1 回复 | 直到 7 年前

Ori Drori 7 年前

stacking context ,将 .shadow 元素在它的同级之上。为了防止这种情况,您可以使用转换以外的其他属性( top: -3px 例如):

.container {
  margin: 30px;
  padding: 10px;
}

.shadow {
  position: relative;
  height: 100px;
  width: 100px;
  background-color: #ff0;
  float: left;
  margin: 4px;
}

.shadow::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  box-shadow: 0px 10px 1000px #000;
}

.shadow:hover {
  top: -3px;
}

.shadow:hover::after {
  box-shadow: 0px 20px 1500px #000;
}

<div class="container">
  <div class="shadow"></div>
  <div class="shadow"></div>
  <div class="shadow"></div>
  <div class="shadow"></div>
</div>

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

Mass · 如何在Tailwind CSS v4中创建配置

1 年前

magenta placenta · 将css变量合并为一个变量

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前