CSS3 渐变再现“内发光”应用了边框半径的 Illustrator 效果
我正在尝试正确理解 CSS3 渐变（特别是径向渐变），在这样做的过程中，我认为我给自己设定了一个相对艰巨的挑战。
在 Adobe Illustrator 中，我创建了以下“按钮”样式。
为了创建此图像，我创建了一个背景颜色为 rgb(63,64,63 ) 或 #3F403F，然后将其“风格化”以具有 15px 的边框半径。
然后我对其应用了“内发光”，不透明度为 25%，模糊为 8 像素，从中心开始为白色。最后，我在上面应用了 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))
);
}
基本上，很糟糕。任何提示或技巧都感激地接受，并提前非常感谢您！
I am in the process of trying to get my head properly around CSS3 Gradients (specifically radial ones) and in doing so I think I've set myself a relatively tough challenge.
In Adobe Illustrator I have created the following 'button' style.
To create this image I created a rectangle with a background colour of rgb(63,64,63) or #3F403F, then 'stylized' it to have a 15px border radius.
I then applied an 'inner glow' to it with a 25% opacity, 8px blur, white from the center. Finally, I applied a 3pt white stroke on it. (I'm telling you all of this in case you wished to reproduce it, if the image above isn't sufficient.)
So, my question is thus:
Is it possible to recreate this 'button' using CSS without the need for an image?
I am aware of the 'limitations' of Internet Explorer (and for the sake of this experiment, I couldn't give a monkeys). I am also aware of the small 'bug' in webkit which incorrectly renders an element with a background colour, border-radius and a border (with a different color to the background-color) - it lets the background color bleed through on the curved corners.
My best attempt so far is fairly pathetic, but for reference here is the code:
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))
);
}
Basically, terrible. Any hints or tips gratefully accepted and thank you very much in advance for them!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
看起来您正在尝试生成一个渐变来复制此内容：
您可以使用插入框阴影来做到这一点。例如：
It seems like you're trying to produce a gradient to replicate this:
You can do exactly that using an inset box-shadow. For example:
没有额外的标记：
径向渐变非常难以控制，并且在浏览器中的工作方式比线性渐变有更大的不同。而且，与内部发光不同，它们实际上是圆形的，而不是与盒子的大部分矩形轮廓相匹配。
由于每个允许 box-shadows 的浏览器也允许 rgba 和多背景，所以我将使用两个线性渐变的组合，堆叠并使用 rgba 颜色 - 一个水平，一个垂直。沿着这些思路（用你需要的颜色替换我的颜色）：
With no extra markup:
Radial gradients are very difficult to control, and work much more differently across browsers than linear gradients do. And, unlike an inner glow, they will actually be circular rather than matching the mostly-rectangular contours of your box.
Since every browser that allows box-shadows also allows rgba and multiple-backgrounds, I would use a combination of two linear gradients, stacked and using rgba colors - one horizontally and one vertically. Something along these lines (replacing my colors with what you need):
您还可以在覆盖的 div 上创建从白色到透明的径向渐变。我使用了这个很棒的 css3 生成工具，它为您提供了跨浏览器兼容性所需的所有 css3。
http://www.colorzilla.com/gradient-editor/
希望这对某人有帮助！
You can also create a radial gradient that goes from white to transparent on an overlayed div. I used this awesome css3 generating tool that gives you the all the needed css3 for cross browser compatibility.
http://www.colorzilla.com/gradient-editor/
Hope this helps somebody!
好吧，我不得不说......你的问题让我很感兴趣，所以我继续回答。
我找到了一个解决方案，但它确实使用了嵌套的
标签，这有点粗鲁，但它实际上与您的图像相同。HTML 如下所示：
请注意
内部嵌套的。不间断的空格只是为了给箭头提供与图片中相同的空间。这是 CSS：
基本上为了获得内发光效果，我从内部元素做了外发光（以阴影的形式）。希望这是有道理的。
要实时观看：http://ianstormtaylor.com/experiments/css-buttons
玩得开心！
Well I got to say... your question interested me a lot so I went at it.
I found a solution, but it does use a nested
<span>tag which is a little uncouth, but it is practically identical to your image.Here's what the HTML looks like:
Notice the nested
<span>inside of the<a>. The non-breaking spaces are just there to give the arrow the same amount of room you have in your picture.And here's the CSS:
Basically to get the inner-glow effect, I did an outer glow (in the form of a drop shadow) from an inner element. Hope that makes sense.
To see it live: http://ianstormtaylor.com/experiments/css-buttons
Have fun!