爲什麼CSS的'overflow-x'和'overflow-y'在box-shadows上工作？這是一個錯誤？

我不確定這是實施錯誤還是我誤解box-shadow與overflow-x和overflow-y有關。我猜這不是一個錯誤，因爲我可以在Chrome，Firefox和Safari上確認這一點。爲什麼CSS的'overflow-x'和'overflow-y'在box-shadows上工作？這是一個錯誤？

box-shadow說到overflow屬性似乎是全有或全無。 overflow: hidden作品上箱陰影，overflow: visible工作太...但

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

...不起作用。瀏覽器只是隱藏x和y軸。在我看來，預期的行爲將會是x軸上的箱形陰影被隱藏，而y軸上的箱形陰影是可見的。

這裏就是我的意思是，還有一個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>

任何想法，爲什麼發生這種情況？還是我錯過了明顯的東西？一個解決方法，將不勝感激。謝謝！

來源

2016-06-14 ian m

考慮到框陰影本身不能被應用到一個單一的側（即CSS沒有'箱陰影-left'， '-right'等屬性）我不希望它能夠處理你提供的場景。你怎麼隱藏一半的影子？陰影是否會淡入隱藏區域？它是否突然被剪輯？ – Quantastical

@Quantastical這是一個很好的觀點，我想缺乏'box-shadow-left'指出它可能有多棘手。我只是覺得，當設置'overflow：hidden'時，它會突然剪切box-shadow，它可以沿着X軸或Y軸複製該功能。我想我的一廂情願的想法。 –

一個簡單的解決方法是單面上的盒子陰影是添加一個漸變背景漸變爲透明的定位僞元素。

例如對於低於陰影（添加跨瀏覽器梯度的東西）

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

來源

2017-06-13 16:23:01 Jon

爲什麼CSS的'overflow-x'和'overflow-y'在box-shadows上工作？這是一個錯誤？

回答

相關問題