我正在努力使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)) ); }