16

我正在尝试正确地了解 CSS3 渐变（特别是径向渐变），这样做我认为我给自己设定了一个相对艰难的挑战。

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

按钮样式截图

为了创建这个图像，我创建了一个背景颜色为rgb(63,64,63)or的矩形#3F403F，然后将其“风格化”为具有 15px 的边框半径。

然后我用 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,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))
    );
}

基本上，很糟糕。非常感谢您接受任何提示或提示，并在此先感谢您！

4

4 回答 4

38

似乎您正在尝试生成渐变来复制此内容：

“然后我用 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);
于 2010-04-04T00:26:10.653 回答
2

没有额外的标记：

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

由于每个允许 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 */
    );
}
于 2010-04-03T23:56:13.127 回答
1

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

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

希望这对某人有帮助！

于 2012-05-01T00:44:49.403 回答
0

好吧，我不得不说......你的问题让我很感兴趣，所以我去了。

我找到了一个解决方案，但它确实使用了<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

玩得开心！

于 2010-04-03T23:43:58.570 回答