我正在努力绕过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))
);
}
Run Code Online (Sandbox Code Playgroud)
基本上,太可怕了.感激地接受任何提示或提示,并提前感谢他们!