我有一个 HTML 元素对列表,每一对都应该有一个统一的框阴影。通常,您可以通过将 box-shadow 样式附加到 list-item 类来完成此操作,一切都会正常进行。
但是,在我的例子中,HTML 是自动生成的,这意味着
- 我无法添加任何可用作包装器/容器的新 HTML 元素
- list-item 类默认有填充,它必须有那个填充
我已经尝试为 upper 和 lower CSS 类添加不同的 box-shadow 值,但我似乎无法获得看起来阴影均匀地围绕 list-item 并且在 upper 和 lower 之间没有阴影的结果降低。
这是 HTML:
<div id="list">
<div class="list-item">
<div class="upper"></div>
<div class="lower"></div>
</div>
<div class="list-item">
<div class="upper"></div>
<div class="lower"></div>
</div>
</div>
那么,如何在不触及列表项类的 padding 属性且不添加或删除任何 HTML 元素的情况下实现看起来均匀围绕列表项的框阴影?
编辑 - 这是所有自动生成的 CSS 和我的盒子阴影尝试的 fiddle :https://jsfiddle.net/1snLfok3/1/
最佳答案
你应该提供一些 CSS 来澄清这个问题,但这是我的猜测和一个可能的解决方案:伪元素之后
:root {
--padding-size: 10px;
--double-padding-size: 20px;
}
#list {
display: flex;
flex-direction: row;
}
.list-item {
position: relative;
width: 100px;
height: 100px;
margin: 10px;
padding: var(--padding-size);
}
.list-item:after {
position: absolute;
top: var(--padding-size);
left: var(--padding-size);
width: calc(100% - var(--double-padding-size));
height: calc(100% - var(--double-padding-size));
box-shadow: 3px 3px 3px #000;
content: "";
}
.upper {
width: 100%;
height: 50%;
background: red;
}
.lower {
width: 100%;
height: 50%;
background: darkred;
}
关于html - 两个 HTML 元素的共享 CSS 框阴影,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58340782/