我遇到了一個問題，將 box-shadow 應用于 flex 容器，絕對定位，flex-items 具有負邊距。對于背景關系，我試圖顯示一組水平重疊的撲克牌。
body {
background-color: green;
}
.game-container {
background-color: yellow;
background-size: 1159px 771px;
background-position: top;
background-repeat: no-repeat;
background-position: top;
position: relative;
height: 100vh;
}
.player-hand-1 {
top: -172px;
left: 50%;
transform: translate(calc(-50% 80px), 0);
display: flex;
position: absolute;
box-shadow: 29px 33px 21px rgba(0, 0, 0, 0.24);
}
.player-hand-1 img {
margin-left: -160px;
background: red;
border: 1px solid white;
}
.card {
width: 200px;
height: 280px;
}<!DOCTYPE html>
<html>
<body>
<div class="game-container">
<div class="player-hand-1">
<img src="/static/media/cardBack.15757e9ce5d42038580a.png" alt="Their card" class="card">
<img src="/static/media/cardBack.15757e9ce5d42038580a.png" alt="Their card" class="card">
<img src="/static/media/cardBack.15757e9ce5d42038580a.png" alt="Their card" class="card" />
<img src="/static/media/cardBack.15757e9ce5d42038580a.png" alt="Their card" class="card" />
<img src="/static/media/cardBack.15757e9ce5d42038580a.png" alt="Their card" class="card" />
</div>
</div>
</body>
</html>我試圖在玩家手上添加一個偽元素，但沒有可見的結果。
.player-hand-1 {
&:after {
content: '';
clear: both;
}
}
我一直在嘗試將影像包裝在另一個 div 中，給它絕對位置并在其上設定盒子陰影。
如何讓 box-shadow 的寬度與所有 flex-items 的寬度相同？
我已經修改了我的代碼，使它成為一個最小的作業示例。
uj5u.com熱心網友回復：
你的卡片溢位了盒子。
您可以使用 filter 代替 : filter:drop-shadow( 29px 33px 21px rgba(0, 0, 0, 0.24));，它會從盒子的可見內容中繪制陰影，而不僅僅是從它所覆寫的真實大小/區域。
可能的例子：
body {
background-color: green;
}
.game-container {
background-color: yellow;
background-size: 1159px 771px;
background-position: top;
background-repeat: no-repeat;
background-position: top;
position: relative;
height: 100vh;
}
.player-hand-1 {
top: -172px;
left: 50%;
transform: translate(calc(-50% 80px), 0);
display: flex;
position: absolute;
filter:drop-shadow( 29px 33px 21px rgba(0, 0, 0, 0.24));
}
.player-hand-1 img {
margin-left: -160px;
background: red;
border: 1px solid white;
}
.card {
width: 200px;
height: 280px;
}<!DOCTYPE html>
<html>
<body>
<div class="game-container">
<div class="player-hand-1">
<img src="/static/media/cardBack.15757e9ce5d42038580a.png" alt="Their card" class="card">
<img src="/static/media/cardBack.15757e9ce5d42038580a.png" alt="Their card" class="card">
<img src="/static/media/cardBack.15757e9ce5d42038580a.png" alt="Their card" class="card" />
<img src="/static/media/cardBack.15757e9ce5d42038580a.png" alt="Their card" class="card" />
<img src="/static/media/cardBack.15757e9ce5d42038580a.png" alt="Their card" class="card" />
</div>
</div>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/508208.html