CSS：無漸變的漸變？

我想用兩種不同的顏色製作一個簡單的酒吧。我想要的是第一種顏色停止，第二種顏色以無轉換或漸變開始。我知道這聽起來很愚蠢，漸變沒有漸變！CSS：無漸變的漸變？

CSS

-webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 60px,rgba(27,151,143,1) 60px,rgba(27,151,143,1) 60px,rgba(27,151,143,1) 100%);

而且它產生非常接近的結果，但其中兩種顏色滿足它變得模糊，因爲它仍然是做過渡/梯度的事情。

有沒有辦法做到完美的停止，如果這甚至是術語？

來源

2014-03-26 user3427494

JSfiddle請 –

退房http://www.colorzilla.com/gradient-editor/他們有你想要的風格。 –

@Paulie_D [JsFiddle]（http://jsfiddle.net/b4j35/） –

這是我最喜歡的CSS梯度發生器工具。有一個像Photoshop一樣的可視化編輯器，它可以爲CSS複製粘貼。

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

來源

2014-03-26 17:02:52 Joel

Jeez！這是我用過的，甚至沒有意識到我可以選擇另一種選擇！感謝您指出了這一點！！！ – user3427494

不久，它應該是：

linear-gradient(
to top, 
rgba(255,255,255,1) 60px, 
rgba(27,151,143,1) 60px 
);

http://jsfiddle.net/b4j35/1/

和鉻，它需要overloap避免模糊defaut啄的事情： http://jsfiddle.net/b4j35/2/

div.grad { 
    height: 100px; 
    background: linear-gradient(
to top, 
rgba(255,255,255,1) 61px, 
rgba(27,151,143,1) 59px 
); 
    border:solid; 
}

來源

2014-03-26 17:13:06

你有什麼已經是無變化漸變，因爲白色的結束和綠色的開始都在60px。所以，你不能這樣做。

所剩下的辦法就是多背景方式：

div.grad { 
    height: 100px; 
    background: linear-gradient(to top, white, white), rgb(27,151,143); 
    background-size: 100% 60px; 
    background-position: left top; 
    background-repeat: no-repeat; 
}

fiddle

順便說一句，我已經改變了線性漸變到前綴少的版本，它的工作原理是這樣在大多數現代瀏覽器中

來源

2014-03-26 17:19:00 vals

CSS：無漸變的漸變？

回答

相關問題