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重現「內部發光」效果的漸變

回答

相關問題