模糊效果的无缝框阴影

Question

我试图让div看起来像没有边缘的白色发光圆圈。 css通过以下方式实现：

＆＃13;

＆＃13;

body {
  background: #000;
}
div {
  border-radius: 50%;
  /* makes the div background circular */
  background: white;
  height: 275px;
  width: 275px;
  box-shadow: 0px 0px 220px 279px #fff;
  /* creates glow effect */
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

出现问题时，它看起来像这样：

问题在于，在某些屏幕上，有一条线将圆圈与发光分开。我试图在没有圆圈的情况下实现无缝发光。我尝试了filter:blur，但这不是一个选项，因为它模糊了嵌套在div中的徽标图像。

问题出在the landing page of this site上。

Answer 1

Chrome中的错误渲染似乎是由blur-radius引起的，spread-radius是隐藏;似乎只会出现大blur-radius个值。通过反复试验，您可以使用spread-radius来掩盖错误。

它并不完美，但这有效：

box-shadow: 0px 0px 140px 300px #FFF;

这些是您网站上可以使用的更改。将边框半径和框阴影放在外部div上以消除灰色环。

#logo-outer {
    margin: 10px auto;
    width: 275px; /* increase width to match #logo */
    background: none repeat scroll 0% 0% #FFF;
    border-radius: 50%;
    box-shadow: 0px 0px 140px 300px #FFF; /* change the box shadow blur and spread */
}
#logo {
    height: 275px;
    width: 275px;
    background: none repeat scroll 0% 0% #FFF;
}

这就是它在Chrome中的样子

错误解决方法示例

＆＃13;

＆＃13;

body {
  background: #000;
}
div {
  border-radius: 50%;
  height: 250px;
  width: 250px;
  box-shadow: 0 0 140px 300px #fff;
  background: #FFF;
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;