Chrome中的問題：渲染大盒子陰影

我只是想將div的盒子陰影設置爲：... 0 0 500px ...（大模糊值）。谷歌瀏覽器（最新版本，windows & ubuntu）我看到奇怪的方塊 - 人工製品。在Firefox中，我只得到一個正常的影子。Chrome中的問題：渲染大盒子陰影

的jsfiddle：http://jsfiddle.net/2GRGF/1/（從How to create a box-shadow that covers the entire page?）

是否有任何變通辦法？

Box-shadow bug in chrome

來源

2015-06-19 LevChurakov

對於上帝的愛不要這樣做。全屏顯示的時間範圍爲 '100ms-160ms'。你不需要這樣做。 – Ogalb

@BlagoEreš我需要靜態輕量級非常大的發光效果。那麼，繪製它的最好方法是什麼？ SVG？ – LevChurakov

我不知道你的設計是怎麼樣的，但是恐怕目前CSS'box-shadow'是唯一的選擇，但是性能會降低，我建議你不要那麼做。嘗試重新思考你的設計，並提出更實用和更高效的方案。 'border-radius' +'box-shadow'仍然是非常昂貴的css屬性，特別是在Chrome中。 – Ogalb

您可以使用過濾器模擬插圖的box-shadow。就像這樣：http://jsfiddle.net/igoradamenko/vmeortsf/

HTML：

<div class="shadow"> 
    <div class="blurred"></div> 
</div>

CSS：通過IE以外的所有現代瀏覽器（所有的）支持

.shadow { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 

    background: #555; 
} 

.blurred { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 

    margin: auto; 
    width: 60%; 
    height: 60%; 
    border-radius: 50%; 

    background: #fff; 
    -webkit-filter: blur(100px); 
    filter: blur(100px); 
}

今天的過濾器。但是你可以爲它們使用有條件的規則。所以，它至少必須在IE9 +中工作：http://jsfiddle.net/igoradamenko/yywuhx3p/

來源

2015-06-19 22:29:42

在這種情況下，我更喜歡徑向漸變...更快。 – LevChurakov

@LevChurakov我不確定渲染/繪製速度過濾器和漸變，但編寫梯度代碼真的更快。說實話，我完全忘了他們。無論如何，我敢肯定箱子陰影比他們每個人都慢。如果你真的需要盒子陰影，你應該添加'transform：translatez（0）;'div來與它。它會加快陰影並刪除一些文物。不是全部，但半個麪包比沒有面包好。祝你好運！ :) –

您的模糊半徑太大。

雖然我不認爲這是一個好主意，因爲@LevChurakov提到...

.shadow { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    -webkit-box-shadow: inset 0px 0px 215px #000000; 
    box-shadow: inset 0px 0px 215px #000000; 
}

來源

2015-06-19 21:32:52

當邊界半徑不是很大時，我會看到這個錯誤。附加的圖像是這個jsfiddle截圖。而在Firefox中，它很光滑，乾淨。 – LevChurakov

-moz-box-shadow：inset 0px 0px 215px＃000000;你沒有FF特定的風格。 –

在FF中它的工作原理和工作良好（你現在不需要任何前綴：http：//caniuse.com/#feat=css-boxshadow）。在Chrome中 - 不。 – LevChurakov

Chrome中的問題：渲染大盒子陰影

回答

相關問題