CSS变换比例忽略z-index和渐变答案

【问题标题】：CSS transform scale ignor z-index and gradientCSS变换比例忽略z-index和渐变
【发布时间】：2019-12-14 11:27:03
【问题描述】：

我在::after 上使用linear-gradient 来制作这样的对象，即消失的边框。现在我想使用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

【问题讨论】：

标签： html css linear-gradients

【解决方案1】：

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

【讨论】：