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

我正在尝试围绕CSS3渐变（特别是放射状的）正确地取向我的头部，并且这样做我想我已经设置了我自己是一个相对艰难的挑CSS3使用边框半径从Illustrator重现“内部发光”效果的渐变

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

Button style screenshot

为了创建这个形象我创建了一个长方形的rgb(63,64,63)或#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)) 
    ); 
}

基本上，太可怕了。任何提示或技巧感激地接受，并非常感谢你提前为他们！

来源

2010-04-03 RichardTape

好像你正在尝试产生梯度复制此：

“我当时适用的“内发光'以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-04 00:26:10 Dan

很高兴知道！这是正确的答案...忽略我的！ – 2010-04-04 00:53:41

很酷，大部分演示都离开了。很好学习。 – 2010-04-04 06:17:14

谢谢“丹”;） – RichardTape 2010-04-04 14:21:09

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

我找到了一个解决方案，但它确实使用了一个嵌套的<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-03 23:43:58

哦，你也想为Safari添加-webkit前缀。但正如你所说，Safari让边界半径蔓延一点点。 – 2010-04-03 23:45:35

不要这样做......丹提供了一个更好，更快的方式来获得你的东西。 – 2010-04-04 00:54:24

由于没有额外的标记：

径向渐变是非常难以控制，制定更加不同跨浏览器比线性渐变做。而且，与内部发光不同的是，它们实际上是圆形的，而不是匹配箱子的大部分矩形轮廓。由于每个允许阴影框的浏览器也允许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-03 23:56:13

嘿，你有这个实时预览吗？我很好奇，看看它是如何工作的......我无法通过复制粘贴来实现它。谢谢！ – 2010-04-04 00:13:23

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

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

希望这有助于有人！

来源

2012-05-01 00:44:49 mymex1

aaaaaaannndddd射击！ – Pierre 2015-11-19 04:18:26

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

回答

相关问题