html - CSS 由内而外的晕影/发光效果

Question

我有一个带有晕影效果的 div。

<div id="box" class="glow"></div>

#box
{    
padding:10px;
border:solid 1px #ddd;
    width:100px;
    height:400px;
    position:relative;
}

.glow:after 
{
  -webkit-box-shadow:inset 0px 0px 70px #CE1A1A;
  -moz-box-shadow:inset 0px 0px 70px #CE1A1A;
  box-shadow:inset 0px 0px 70px #CE1A1A;

    position: absolute;
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0;
    content: "";
}

这是 jsfiddle:http://jsfiddle.net/bEFha/

但我真正追求的是由内而外的光泽。所以中间是红色的，两侧是白色的。我想要实现的效果就好像有一个红色光源从 div 下方发出光芒。

我尝试了各种方法，但就是无法使晕影效果从中心扩散。

感谢任何帮助。

更新:如果可能的话，我不想修改 #box 的背景属性，因为我需要它是白色的。

Answer 1

您可以使用径向渐变背景。
请参阅:https://developer.mozilla.org/de/docs/Web/CSS/radial-gradient

这是一个非常基本的示例，您可以调整:http://jsfiddle.net/bEFha/5/

background-image: radial-gradient(farthest-corner at center center, #CE1A1A 0%, #ffffff 100%);

我还发现这个可视化编辑器非常有帮助 http://www.visualcsstools.com/