Question

我正在努力绕过CSS3 Gradients（特别是径向的），并且这样做我想我已经为自己设置了一个相对艰难的挑战。

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

Button style screenshot

要创建此图片，我创建了一个背景颜色为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))
    );
}

基本上，太糟糕了。感激地接受任何提示或提示，并提前感谢他们！

Answer 1

您似乎正在尝试生成一个渐变来复制它：

“然后我使用了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);

Answer 2

没有额外的标记：

径向渐变非常难以控制，并且在浏览器中的工作方式与线性渐变相比更为不同。并且，与内部发光不同，它们实际上是圆形的，而不是与盒子的大多数矩形轮廓相匹配。

由于每个允许框阴影的浏览器也允许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 */
    );
}

Answer 3

您还可以在叠加的div上创建从白色到透明的径向渐变。我使用了这个非常棒的css3生成工具，它为您提供了跨浏览器兼容性所需的所有css3。

http://www.colorzilla.com/gradient-editor/

希望这有助于某人！

Answer 4

嗯，我得说...你的问题对我很感兴趣，所以我去了。

我找到了一个解决方案，但它确实使用了嵌套的<span>标签，这个标签有点粗鲁，但实际上与您的图像完全相同。

这是HTML的样子：

<a href="/" class="dark-button"><span>Carry on reading&nbsp;&nbsp;&rarr;</span></a>

注意<span>内的嵌套<a>。不间断的空间就是为了给你的箭头提供相同数量的空间。

这是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; 
    }

基本上为了获得内部发光效果，我从内部元素做了外部发光（以阴影的形式）。希望这是有道理的。

要查看它：http://ianstormtaylor.com/experiments/css-buttons

玩得开心！

CSS3渐变，用于从Illustrator重现边界半径的“内部发光”效果

4 个答案: