gpt4 book ai didi

html - 在溢出区域外显示框阴影

转载 作者:太空狗 更新时间:2023-10-29 12:32:48 24 4
gpt4 key购买 nike

<分区>

我在一个容器里放了几个盒子。容器设置为 overflow: hidden 以确保一切都在原位。移除 overflow: hidden 不是一种选择,因为这样做会导致内容溢出,否则它会调整大小以适应容器。

我试图给盒子一个 box-shadow,但是这样做时,容器边缘的盒子边缘的阴影没有显示出来(见下图), 因为父容器停在那里并且没有溢出。

A cropped image showing a portion of four boxes within a container  each with a box-shadow: two at left; two at right.

如绿色箭头所示,左侧的两个框按预期显示了阴影。如红色箭头所示,右侧两个框的阴影在每个与容器相接的右边缘被裁剪。

有什么办法解决这个问题吗?

一个简单的复制:
注意:此代码片段是由社区编辑而非作者添加的,目的是重现这些症状。它不反射(reflect)作者用于生成附加图像的实际代码。

.container {
overflow: hidden;
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 1rem;
row-gap: 1rem;
}

.shadow {
display: inline-block;
height: 2rem;
background-color: tomato;
box-shadow: 0 0 0.25rem black;
}
<div class="container">
<div class="shadow"></div>
<div class="shadow"></div>
<div class="shadow"></div>
<div class="shadow"></div>
</div>

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com