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

对于上帝的爱不要这样做。全屏显示的时间范围为 '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/

在这种情况下，我更喜欢径向渐变...更快。 – 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; 
}

当边界半径不是很大时，我会看到这个错误。附加的图像是这个jsfiddle截图。而在Firefox中，它很光滑，干净。 – LevChurakov

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

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

Chrome中的问题：渲染大盒子阴影

相关推荐