CSS3渐变,用于从Illustrator重现边界半径的"内部发光"效果

我正在努力绕过CSS3 Gradients(特别是径向的),并且这样做我想我已经为自己设置了一个相对艰难的挑战.

在Adobe Illustrator中,我创建了以下"按钮"样式.

为了创建这个图像,我创建了一个背景颜色为rgb(63,64,63)或的矩形#3F403F,然后"风格化"它的边界半径为15px.

然后我使用了25%不透明度,8px模糊,从中心白色的"内部发光".最后,我在它上面应用了3pt白色笔画.(如果您想要复制它,我告诉您所有这些,如果上面的图像不够用.)

所以,我的问题是:

是否可以使用CSS重新创建这个"按钮"而无需图像？

我知道Internet Explorer的"局限性"(为了这个实验,我不能给猴子们).我也知道webkit中的小'bug',它错误地渲染了一个背景颜色,边框半径和边框(背景颜色与颜色不同)的元素 - 它让背景颜色在弯曲处渗透角落.

到目前为止,我最好的尝试是相当可悲的,但这里的参考是代码:

section#featured footer p a
{
    color: rgb(255,255,255);
    text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border: 3px solid rgb(255,255,255);
    background: rgb(98,99,100);

    background: -moz-radial-gradient(
        50% 50%, 
        farthest-side, 
        #626364, 
        #545454
    );
    background: -webkit-gradient(
        radial, 
        50% 50%,
        1px,
        50% 50%,
        5px,
        from(rgb(98,99,100)),
        to(rgb(84,84,84))
    );
}

基本上,太可怕了.感激地接受任何提示或提示,并提前感谢他们!

看起来你正在尝试生成一个渐变来复制它:

"然后,我以25%的不透明度,8px模糊,中心的白色应用'内部发光'."

你可以使用插入框阴影来做到这一点.例如:

-moz-box-shadow: inset 0 0 8px rgba(0,0,0, 0.25);
-webkit-box-shadow: inset 0 0 8px rgba(0,0,0, 0.25);