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

您可以使用radial-gradient背景请参阅：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/

Answer 2

我不太确定你的追求是什么，但通过玩弄我得到了这个：

box-shadow:inset 0px 3px 20px 10px #FFF;
background-color: #CE1A1A;

Fiddle Here

Answer 3

尝试这种复古效果 Demo

Just give background color to the box and you will get cool vintage effect.

#box{ background:#FFE4E4; }

Answer 4

更新的答案：

Demo

CSS更改

#box:after{
    content:"";
    background: #CE1A1A;
    opacity:0.5;
}
.glow:after {
    -webkit-box-shadow:inset 0px 0px 120px #fff;
    -moz-box-shadow:inset 0px 0px 120px #fff;
    box-shadow:inset 0px 0px 120px #fff;
    }

您的#box仍为白色，但我添加#box:after使其变红。

Css由内而外的小插图/发光效果

4 个答案:

Demo

Demo with Image