CSS 變換比例忽略 z-index 和漸變

Question

我在::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

Answer 1

transform 將創建一個堆疊上下文，強制將偽元素繪制在元素的外部/后面。 相關問題以更好地理解該問題：為什么具有 z-index 值的元素不能覆蓋其子元素？

考慮通過使用不需要偽元素的多個背景來實現相同效果的不同方式

 .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>

如果您需要具有透明背景和帶半徑的邊框漸變的解決方案，請檢查：帶邊框半徑的邊框漸變