gpt4 book ai didi

html - CSS网格列周围的框阴影

转载 作者:搜寻专家 更新时间:2023-10-31 08:39:01 26 4
gpt4 key购买 nike

我目前有一个具有动态行数的 CSS 网格,其中有应组合在一起的行子集。我想用投影将这些组的第一列包裹起来,但我不知道该怎么做。我可以用边框完成我想要的,因为我可以去掉中间元素的顶部和底部边框。

有没有办法在有或没有网格布局的情况下做到这一点?

.grid {
display: grid;
grid-template-columns: 250px 250px 250px;
grid-column-gap: 20px;
}

.top,
.middle,
.bottom {
border: 2px solid black;
}

.top {
border-bottom: none;
}

.middle {
border-top: none;
border-bottom: none;
}

.bottom {
border-top: none;
}

.title {
text-align: center;

padding: 5px 20px;
}

.title span {
margin: 0 20px;
}

.title,
.details,
.actions {
text-align: center;
vertical-align: middle;
margin: auto 0;
}
<div class="grid">
<span class="top title">
<span>row 1 title</span>
</span>
<span class="details">row 1 details</span>
<span class="actions">row 1 actions</span>

<span class="middle title">
<span>row 2 title</span>
</span>
<span class="details">row 2 details</span>
<span class="actions">row 2 actions</span>

<span class="middle title">
<span>row 3 has an extra long tile that wraps around</span>
</span>
<div class="details">row 3 details</div>
<span class="actions">row 3 actions</span>

<span class="bottom title">
<span>row 4 title</span>
</span>
<span class="details">row 4 details</span>
<span class="actions">row 4 actions</span>

<span class="top title">
<span>row 5 title</span>
</span>
<span class="details">row 5 details</span>
<span class="actions">row 5 actions</span>

<span class="bottom title">
<span>row 6 title</span>
</span>
<span class="details">row 6 details</span>
<span class="actions">row 6 actions</span>
</div>

最佳答案

无法将样式应用于特定列或行中的所有网格项,也无法为此对它们进行分组。您已经在做直接定位元素的可能选项。


黑客解决方案

在这里,我将使用您正在使用 topmiddlebottom 类以及 盒子阴影:

  • 使用一个方便 box-shadow 将一个伪元素放在网格项后面第一列,

  • grid item 上使用 background 来匹配列,从而隐藏行与行之间的阴影,

  • 现在使用 margin 分隔 bottom 类。

.grid {
display: grid;
grid-template-columns: 250px 250px 250px;
grid-column-gap: 20px;
}

.top:after,
.middle:after,
.bottom:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
box-shadow: 0 0px 10px 2px #ddd;
background: #fff;
}

.title.bottom {
margin-bottom: 15px;
background: transparent;
}

.title {
text-align: center;
position: relative;
padding: 5px 20px;
background: #fff;
}

.title span {
margin: 0 20px;
}

.title,
.details,
.actions {
text-align: center;
vertical-align: middle;
margin: auto 0;
}
<div class="grid">
<span class="top title">
<span>row 1 title</span>
</span>
<span class="details">row 1 details</span>
<span class="actions">row 1 actions</span>

<span class="middle title">
<span>row 2 title</span>
</span>
<span class="details">row 2 details</span>
<span class="actions">row 2 actions</span>

<span class="middle title">
<span>row 3 has an extra long tile that wraps around</span>
</span>
<div class="details">row 3 details</div>
<span class="actions">row 3 actions</span>

<span class="bottom title">
<span>row 4 title</span>
</span>
<span class="details">row 4 details</span>
<span class="actions">row 4 actions</span>

<span class="top title">
<span>row 5 title</span>
</span>
<span class="details">row 5 details</span>
<span class="actions">row 5 actions</span>

<span class="bottom title">
<span>row 6 title</span>
</span>
<span class="details">row 6 details</span>
<span class="actions">row 6 actions</span>
</div>

关于html - CSS网格列周围的框阴影,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56082998/

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