Chrome中的错误：渲染大框阴影

Question

我只想将div的box-shadow设置为：... 0 0 500px ...（大模糊值）。

在谷歌浏览器（最新版本，windows和ubuntu）中，我看到了奇怪的正方形人工制品。在Firefox中我只是一个正常的阴影。

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

有没有解决方法？

Answer 1

您可以使用过滤器模拟插入框阴影。像这样：http://jsfiddle.net/igoradamenko/vmeortsf/

HTML：

.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);
}

CSS：

{{1}}

今天所有现代浏览器都支持过滤器，除了IE（所有这些）。但是你可以为它们使用条件规则。因此，它必须至少在IE9 +中起作用：http://jsfiddle.net/igoradamenko/yywuhx3p/

Answer 2

你的模糊半径太大了。

虽然我不认为这是一个好主意，因为@LevChurakov暗示......

$queryString = "SELECT * FROM db_products WHERE owner_id='$user_id'"
." AND active=1 "                       //Note these 
. $filter_string                        //are separated 
. "ORDER BY RAND() LIMIT 10 ";          //into individual lines

$sql_more_items = $db->query($queryString);