CSS CSS3 渐变从 Illustrator 再现“内发光”效果，并应用了边框半径
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2572713/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 Gradients to reproduce an 'inner glow' effect from Illustrator with border-radius applied
提问by RichardTape
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.
我正在尝试正确处理 CSS3 渐变（特别是径向渐变），在这样做的过程中，我认为我给自己设定了一个相对艰巨的挑战。
In Adobe Illustrator I have created the following 'button' style.
在 Adobe Illustrator 中，我创建了以下“按钮”样式。
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.
为了创建此图像，我创建了一个背景色为rgb(63,64,63)或的矩形#3F403F，然后将其“风格化”为具有 15 像素的边框半径。
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.)
然后我对它应用了“内发光”，不透明度为 25%，模糊为 8px，中心为白色。最后，我在它上面应用了一个 3pt 的白色描边。（我告诉你所有这些，以防你想复制它，如果上面的图片不够的话。）
So, my question is thus:
所以，我的问题是：
Is it possible to recreate this 'button' using CSS without the need for an image?
是否可以在不需要图像的情况下使用 CSS 重新创建这个“按钮”？
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.
我知道 Internet Explorer 的“限制”（为了这个实验，我不能给猴子）。我也知道 webkit 中的一个小“错误”，它错误地渲染了具有背景颜色、边框半径和边框（与背景颜色不同的颜色）的元素 - 它让背景颜色在曲线上渗出角落。
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!
基本上，可怕。感谢您接受任何提示或提示，并提前非常感谢您！
回答by Dan
It seems like you're trying to produce a gradient to replicate this:
似乎您正在尝试生成一个渐变来复制此内容：
"I then applied an 'inner glow' to it with a 25% opacity, 8px blur, white from the center."
“然后我用 25% 的不透明度、8px 的模糊度、从中心开始的白色为其应用了‘内发光’。”
You can do exactly that using an inset box-shadow. For example:
您可以使用插入框阴影来做到这一点。例如：
-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);
回答by Miriam Suzanne
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):
由于每个允许 box-shadows 的浏览器也允许 rgba 和多背景，我将使用两个线性渐变的组合，堆叠并使用 rgba 颜色 - 一个水平和一个垂直。沿着这些路线的东西（用你需要的替换我的颜色）：
section#featured footer p a {
background-color: #000;
background-image: -moz-linear-gradient(
left,
rgba(255,255,255,.5),
rgba(255,255,255,0) 10%,
rgba(255,255,255,0) 90%,
rgba(255,255,255,.5)
), -moz-linear-gradient(
top,
rgba(255,255,255,.5),
rgba(255,255,255,0) 10%,
rgba(255,255,255,0) 90%,
rgba(255,255,255,.5)
);
background-image: -webkit-gradient(
/* webkit's syntax for the same horizontal gradient */
), -webkit-gradient(
/* webkit's syntax for the same vertical gradient */
);
}
回答by mymex1
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.
您还可以在重叠的 div 上创建从白色到透明的径向渐变。我使用了这个很棒的 css3 生成工具，它为您提供了跨浏览器兼容性所需的所有 css3。
http://www.colorzilla.com/gradient-editor/
http://www.colorzilla.com/gradient-editor/
Hope this helps somebody!
希望这对某人有帮助！
回答by Ian Storm Taylor
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.
我找到了一个解决方案，但它确实使用了<span>一个有点粗鲁的嵌套标签，但它实际上与您的图像相同。
Here's what the HTML looks like:
这是 HTML 的样子：
<a href="/" class="dark-button"><span>Carry on reading →</span></a>
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.
注意嵌套<span>在<a>. 不间断的空间只是为了给箭头提供与图片中相同的空间。
And here's the CSS:
这是CSS：
a.dark-button {
font: 11pt/11pt "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 100;
color: white;
text-decoration: none;
background-color: #555;
border: 3px solid white;
-moz-border-radius: 15px; padding: 5px 3px;
text-shadow: 1px 1px 2px #111;
}
a.dark-button span {
background-color: #666;
padding: 2px 12px;
-moz-border-radius: 15px;
-moz-box-shadow: 0 0 1px #666, 0 0 2px #666, 0 0 3px #666, 0 0 4px #666, 0 0 5px #666, 0 0 7px #666;
}
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
现场观看：http: //ianstormtaylor.com/experiments/css-buttons
Have fun!
玩得开心！
