css - 为什么 CSS 'overflow-x' 和 'overflow-y' 不能用于盒子阴影？这是一个错误吗？

Question

我不确定这是一个实现错误还是我误解了 box-shadow 与 overflow-x 和 overflow-y< 的关系。我猜这不是错误，因为我可以在 Chrome、Firefox 和 Safari 上确认这一点。

box-shadow 在涉及 overflow 属性时似乎是全有或全无。 overflow: hidden 适用于盒子阴影，overflow: visible 也适用......但是

overflow-x: hidden;
overflow-y: visible;

... 不起作用。浏览器只是隐藏了 x 轴和 y 轴。在我看来，预期的行为是 x 轴上的框阴影被隐藏，而 y 轴上的框阴影可见。

这就是我的意思，还有一个CodePen :

body {padding: 0; margin: 0;}.container {background: dimgray;display: flex;align-items: center;justify-content: center;width: 100vw;height: 100vh;}

.orangeSquare {
  background: orange;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  overflow-x: hidden;
  overflow-y: visible; /* why doesn't this work? */
 
}

.tealRectangle {
  background: teal;
  color: white;
  width: 92px;
  height: 92px;
  line-height: 92px;
  text-align: center;
  
  box-shadow: 0 0 85px 15px black;
}

<div class='container'>
  <div class='orangeSquare'>
    <span class='tealRectangle'>—</span>
  </div>
</div>

关于为什么会发生这种情况的任何想法？还是我错过了一些明显的东西？解决方法也将不胜感激。谢谢!

Answer 1

单边框阴影的一个简单解决方法是添加一个带有渐变背景的定位伪元素，该背景逐渐变为透明。

例如对于下面的阴影(添加跨浏览器渐变的东西)

.cropped-shadow {
	position: relative;
	z-index: 5; 
	background: #fc0;
	height: 70px;
}

.cropped-shadow:after {
	content:" ";
	display: block;
	position: absolute;
	top: 100%;
	width: 100%;
	height: 10px;
	background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 100%);
}

<div class="cropped-shadow"></div>