CSS Grid中overflow:hidden导致text-shadow异常问题求助

问题原因 #

你通过全局选择器*, *::before, *::after把text-shadow应用到了所有元素上，包括设置了overflow:hidden的容器（比如.item1、.item2、.label）。当容器开启overflow:hidden后，文本超出容器的阴影被截断，同时容器自身继承的text-shadow会和文本阴影叠加，视觉上就变成了类似box-shadow的效果。

修复方案 #

只给实际的文本元素添加text-shadow，不要全局覆盖所有元素：

/* 移除全局选择器里的text-shadow */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.parallax {
  position: relative;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

.parallax-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #06076d, #00bfd8);
}

.content-container {
  display: grid;
  grid-template-rows: repeat(20, 1fr);
  grid-template-columns: repeat(10, 1fr);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  color: white;
  white-space: nowrap;
}

h2 {
  grid-column: 2 / 7;
  grid-row: 9 / 13;
}

.label {
  grid-column: 11 / 8;
  grid-row: 17 / 20;
}

/* 只给文本元素添加text-shadow */
.item1,
.item2,
.label {
  font-size: 1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 15px 15px 30px rgb(25, 25, 25), -15px -15px 30px rgb(60, 60, 60);
}

优化建议 #

如果需要给更多文本元素添加阴影，可以用通用类统一管理，避免重复代码：

.text-shadow {
  text-shadow: 15px 15px 30px rgb(25, 25, 25), -15px -15px 30px rgb(60, 60, 60);
}

然后在HTML的文本元素上添加该类：

<div class="item1 text-shadow">Item 1 ABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZ</div>
<div class="item2 text-shadow">Item 2</div>
<div class="label item3 text-shadow">Label</div>

内容的提问来源于stack exchange，提问作者Joey Leo