我在linear-gradient
上使用::after
制作了这样的对象,即消失的边框。现在,我想使用scale
使其中之一处于活动状态(选中),但看起来它忽略了z-index: -1;
并显示所有渐变。我想像其他人一样显示选中的一个。
.Winter-Plans {
width: calc(100%/5 - 16px);
min-height: 360px;
position: relative;
border-radius: 20px;
background: white;
padding: 80px 15px 35px 15px;
margin: 0 8px 20px 8px;
box-sizing: border-box;
float: left;
}
.Winter-Plans::after {
position: absolute;
top: -1px;
bottom: -1px;
left: -1px;
right: -1px;
background: linear-gradient(to top, #ddd, white);
content: '';
z-index: -1;
border-radius: 20px;
}
.Winter-Plans.Selected {
transform: scale(1.1);
}
<div class="Winter-Plans">
</div>
<div class="Winter-Plans Selected">
</div>
<div class="Winter-Plans">
</div>
此标题有很多主题,我尝试过,但是没有一个解决了我的问题。 ps:我无法更改html结构,因此我使用了::after
transform将创建一个堆栈上下文,强制将伪元素绘制在元素的外部/后面。相关问题以更好地理解该问题:Why can't an element with a z-index value cover its child?
[在不需要伪元素的情况下,考虑通过使用多个背景来实现相同效果的另一种方法
.Winter-Plans {
width: calc(100%/5 - 16px);
min-height: 360px;
border-radius: 20px;
background:
linear-gradient(white,white) padding-box, /* cover only the padding area*/
linear-gradient(to top, #ddd, white) border-box; /* cover the border area*/
border:1px solid transparent; /* a transparent border for our gradient */
padding: 80px 15px 35px 15px;
margin: 0 8px 20px 8px;
box-sizing: border-box;
float: left;
}
.Winter-Plans.Selected {
transform: scale(1.1);
}
<div class="Winter-Plans">
</div>
<div class="Winter-Plans Selected">
</div>
<div class="Winter-Plans">
</div>
如果您需要具有透明背景和带半径的边界渐变的解决方案,请检查此:Border Gradient with Border Radius