如何使用CSS漸變創建像這樣的「閃亮」效果？

enter image description here

我所創建的容器和圓角。小提琴here。

但我不知道如何獲得輕微的閃亮效果。有沒有可能在CSS中做到這一點？如果是這樣如何？

以下是我迄今爲止編寫的代碼。

HTML

<div id="phone-outer"> 
    <div id="phone-inner"> 

    </div> 
</div>

CSS

#phone-outer { 
    margin-bottom:200px; 
    margin:0 auto; 
    width:400px; 
    height:500px; 
    background-color:#333; 
    -webkit-border-bottom-right-radius:25px; 
    -webkit-border-bottom-left-radius:25px; 
    -moz-border-radius-bottomright:25px; 
    -moz-border-radius-bottomleft:25px; 
    border-bottom-right-radius:25px; 
    border-bottom-left-radius:25px; 
} 

#phone-inner { 
    margin:0 auto; 
    background-color:#FFF; 
    width:360px; 
    height:460px; 
}

來源

2013-02-13 Isuru

我不夠好，用漸變來正確回答，但你可能想嘗試一個大的徑向漸變，使用rgba顏色來創建半透明的白色陰影，這是重新定位，使其大部分都落後白色區域。 – 2013-02-13 13:13:21

謝謝。我會試一試。我對基本的CSS沒問題，但漸變對我來說也一直是個難題。 – Isuru 2013-02-13 13:36:11

和一些靈感！ HTTP：// tjrus。com/iphone :) – 2013-02-13 13:47:50

足夠接近，我希望：

http://jsfiddle.net/UxSdU/13/

#phone-outer {  
    border: 1px solid #FFFFFF; 
    border-bottom-left-radius: 25px; 
    border-bottom-right-radius: 25px; 

    box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset; 

    height: 500px; 
    width: 400px; 
    margin: 0 auto; 


    background-image: linear-gradient(right, #111 11%, #333 56%); 
    background-image: -o-linear-gradient(right, #111 11%, #333 56%); 
    background-image: -moz-linear-gradient(right, #111 11%, #333 56%); 
    background-image: -webkit-linear-gradient(right, #111 11%, #333 56%); 
    background-image: -ms-linear-gradient(right, #111 11%, #333 56%); 
    background-image: gradient(right, #111 11%, #333 56%); 
}

來源

2013-02-13 13:51:46 KBN

非常感謝。這很好用！我做了一些調整，比如刪除這行'border：1px solid #FFFFFF;'並調整'box-shadow'的值。現在看起來很好。再次感謝:) – Isuru 2013-02-13 15:13:05

@KBN不錯的工作。 – 2014-11-27 10:36:15

玩弄這一點http://www.colorzilla.com/gradient-editor/，你也許能夠想辦法的。然而，背景圖像會更容易。任何你不能只使用這個圖像的理由？

來源

2013-02-13 13:11:35

我有幾個表單控件進入白色區域。如果我使用圖片，當瀏覽器調整大小時，圖片會在控件位於同一位置時移動。這是爲了水平佈局。早些時候用類似的方法解決了很多麻煩。再加上這個網站已經有很多大的圖片了。我試圖保持圖像的使用最小化，以擠出一些表現。 – Isuru 2013-02-13 13:15:19

是的，你可以使用box-shadow屬性，

box-shadow:0px 0px 0px 3px #666;

更新小提琴是在這裏：

http://jsfiddle.net/UxSdU/2/

UPDATE：

對於您可以使用邊界：

更新提琴：

http://jsfiddle.net/UxSdU/6/

來源

2013-02-13 13:14:11 defau1t

你實際上回答了另一個問題。 +1我想知道如何獲得這個薄邊框。：D但是我想要的是底部的那個微光。你知道嗎？在左側。 – Isuru 2013-02-13 13:17:41

@Isuru：看到我更新的答案和小提琴，你的意思是？ – defau1t 2013-02-13 13:22:48

不是邊框。見[this]（http://i.imgur.com/YjBz1AM.jpg）圖片。我希望它引人注目。它真的很難看到。在一些屏幕分辨率。 – Isuru 2013-02-13 13:27:15

如果您正在尋找微妙的漸變發光，這樣的事情應該這樣做：

background:#222 -webkit-radial-gradient(20% 80%, 60% 60%, rgba(255,255,255,.15), rgba(255,255,255,0));

這是WebKit的，可以申請取決於-moz和-o等效您支持表。

您還可以添加多個盒子陰影創建黑影爲好，這樣的：

box-shadow:0px 2px .7px 1px #777, inset 0 -7px rgba(0,0,0,.4);

這裏是一個演示：http://jsbin.com/opinaj/4

enter image description here

來源

2013-02-13 13:40:53 David

非常感謝，大衛。 :)這工作得很好，但只在Chrome中。我嘗試添加背景：＃222 -webkit-radial-gradient（20％80％，60％60％，rgba（255,255,255，.15），rgba（255,255,255,0））;''帶有'-moz- '和'-o'，但它們在Firefox和Opera中不起作用。 – Isuru 2013-02-13 15:14:30

@Isuru FF和Opera有不同的漸變語法，您可以在這裏閱讀其中的一些內容（只需將Google自己添加到其他文檔中）：https：//developer.mozilla.org/en-US/docs/CSS/Using_CSS_gradients – David 2013-02-13 15:17:56

謝謝，大衛。會做:) – Isuru 2013-02-13 17:03:40

如何使用CSS漸變創建像這樣的「閃亮」效果？

回答

相關問題