CSSのオーバーフロー-xとオーバーフロー-yがボックスシャドウで機能しないのはなぜですか？これはバグですか？

Question

これは実装上のバグか、box-shadowがoverflow-xおよびoverflow-yにどのように関係しているか誤解しています。 Chrome、Firefox、Safariでこれを確認できるので、バグではないと思います。

box-shadowは、overflowプロパティの場合には、まったく無意味であるようです。 overflow: hiddenあまりにも動作しますoverflow: visibleボックスシャドウの作品、...しかし、

overflow-x: hidden; 
overflow-y: visible; 

...は動作しません。ブラウザは単にx軸とy軸の両方を隠すだけです。私の見解では、y軸上のボックスシャドーが見える間にx軸のボックスシャドウが隠されていることが予想されます。

は、ここで私が何を意味するかだ、と同様にCodePen：

body {padding: 0; margin: 0;}.container {background: dimgray;display: flex;align-items: center;justify-content: center;width: 100vw;height: 100vh;} 
 

 
.orangeSquare { 
 
    background: orange; 
 
    width: 100px; 
 
    height: 100px; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    
 
    overflow-x: hidden; 
 
    overflow-y: visible; /* why doesn't this work? */ 
 
    
 
} 
 

 
.tealRectangle { 
 
    background: teal; 
 
    color: white; 
 
    width: 92px; 
 
    height: 92px; 
 
    line-height: 92px; 
 
    text-align: center; 
 
    
 
    box-shadow: 0 0 85px 15px black; 
 
}

<div class='container'> 
 
    <div class='orangeSquare'> 
 
    <span class='tealRectangle'>—</span> 
 
    </div> 
 
</div>

すべてのアイデアは、これが起こっている理由を？または私は何か明白な行方不明ですか？回避策も高く評価されます。ありがとう！

Answer 1

片側のボックスシャドウの簡単な回避策は、透明になるフェードするグラデーションの背景を持つ位置擬似要素を追加することです。

（クロスブラウザ勾配のものを追加）

.cropped-shadow { 
 
\t position: relative; 
 
\t z-index: 5; 
 
\t background: #fc0; 
 
\t height: 70px; 
 
} 
 
.cropped-shadow:after { 
 
content:" "; 
 
display: block; 
 
position: absolute; 
 
top: 100%; 
 
width: 100%; 
 
height: 10px; 
 
background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 100%); 
 
}

<div class="cropped-shadow"></div>

下の影のためのボックスが自分自身を隠していることを考慮すると