CSS3渐变从Illustrator中重现“内部辉光”效果,并应用border-radius

我正在努力使CSS3渐变(特别是径向)的头部正确,并且在这样做时,我认为我已经成为一个相对艰难的挑战.

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

要创建此图像,我创建了一个背景颜色为rgb(63,64,63)或#3F403F的矩形,然后将其’程式化’为15像素边框半径.

然后我用一个25％的不透明度,8px的模糊,从中心白色的“内部发光”.最后我用了3pt的白色笔画. (我想告诉你所有这些,如果你想复制它,如果上面的图像是不够的.)

所以,我的问题是：

是否可以使用CSS重新创建这个“按钮”而不需要图像？

我知道Internet Explorer的“限制”(为了这个实验,我不能给猴子).我也知道webkit中的小错误,它错误地渲染了一个背景颜色,边框半径和边框(与背景颜色不同的颜色)的元素 – 它让背景颜色在曲线上渗透角落.

到目前为止,我最好的尝试是可悲的,但是这里的代码是代码：

section#featured footer p a
{
    color: rgb(255,255,255);
    text-shadow: 1px 1px 1px rgba(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);
    background: rgb(98,99,100);

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

基本上可怕任何提示或提示感激不尽,并提前非常感谢您！

解决方法

看来你正试图产生一个梯度来复制这个：

“I then applied an ‘inner glow’ to it with a 25% opacity,8px blur,white from the center.”

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

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

原文地址：https://www.jb51.cc/css/217208.html