三面漸變褪色

我試圖使div背景顏色在左側，頂部和底部淡出。我希望div從#FFF到#CCC從左到右均勻地淡出，並且在頂部和底部30px或10%上淡出到#FFF。三面漸變褪色

要做到這一點，似乎我需要分層漸變。我試過radial gradients，但它們似乎只提供圓圈和省略號，這不是我正在尋找的。我正在尋找線性淡入淡出。

因此，我嘗試使用before元素對梯度進行分層，出於某種原因，頂層梯度似乎沒有覆蓋底層梯度。

div::before { 
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(204,204,204,0.5) 10%,rgba(204,204,204,0.5) 90%,rgba(255,255,255,1) 100%); 
} 

div { 
background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(204,204,204,1) 100%); 
}

來源

2014-09-02 James G.

你怎麼能同時在兩個方向上有一個漸變？你可以張貼你要去的照片嗎？漸變是單向矢量的場。 – Optox 2014-09-02 21:05:24

@Optox查看我的答案。基本上我想分層漸變。線性漸變向右（#FFF）向右（#CCC），在頂部和底部淡出。 – 2014-09-02 21:19:47

好了，所以這是不完美的，但我得到了接近我想要的東西。如果有人認爲他們可以改進這一點，那麼繼續。如果你比我更好，那麼我會選擇你的答案。

我的主要困惑是我沒有意識到::before僞元素放置在主元素的頂部。我認爲::before被放置在元素之前。一旦我明白了這一點，我只需要切換漸變和玩不透明。

元素的頂部（和底部）仍然有一條清晰的線條。我不知道如何解決這個問題。

new JSfiddle

div::before{ 
    background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(204,204,204,0.1) 60%); 
} 

div { 
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(204,204,204,0.5) 20%,rgba(204,204,204,0.5) 80%,rgba(255,255,255,1) 100%); 
}

來源

2014-09-02 21:18:14

這裏有一個不同的方法解決問題。我不知道天氣比梯度更好，但至少你會知道這個選項。

http://jsfiddle.net/6os0epu6/1/

在這裏我用背景色和帶盒陰影（或「內發光」）具有偏移包圍它。

box-shadow:   inset 50px 0 60px rgba(255,255,255,0.5);

這只是一個演示，所以我沒有去追蹤你寫的特定顏色和像素。

note： IE8將需要額外的css代碼，這是不是在這個例子。

來源

2014-09-02 21:33:59 Gil

我確實考慮過這個技巧，但是你不能從左到右依靠穩定的淡入淡出，只是四面模糊。 – 2014-09-05 21:40:21

三面漸變褪色

回答

相關問題