CSS3渐变从应用了边框半径的Illustrator重现“内部发光”效果 [英] CSS3 Gradients to reproduce an 'inner glow' effect from Illustrator with border-radius applied

问题描述

我正在尝试让我的头正确地围绕CSS3渐变（特别是径向渐变），在这样做，我认为我已经给自己一个相对艰难的挑战。

在Adobe Illustrator中，我创建了以下按钮样式。

要创建这个图片，我创建了一个背景颜色为 rgb（63,64 ，63）或＃3F403F ，然后将其风格化为15px的边框半径。

$ b b然后，我用一个25％的不透明度，8px模糊，从中心白色的内部发光。最后，我应用了3pt白色笔画。 （我告诉你所有这一切，如果你想重现它，如果上面的图像是不够的。）

所以，我的问题是： / p>

是否可以使用CSS重新创建此按钮，而无需使用图片？

我知道Internet Explorer的限制（为了这个实验，我不能给猴子）。我也知道webkit中的一个小的错误，它错误地呈现了一个背景颜色，边框半径和边框（与背景颜色不同的颜色）的元素 - 它让背景颜色在弯曲

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

  section＃featured footer pa 
 {
 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））
）; 
} 
  

基本上，可怕。

解决方案

似乎你正在尝试生产一个渐变来复制这个：

然后我应用了一个内部发光它与25％不透明度，8px模糊，白色中心。

您可以使用插图盒阴影来做到这一点。例如：

  -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）; 
  

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!

解决方案

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."

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);

这篇关于CSS3渐变从应用了边框半径的Illustrator重现“内部发光”效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！