2011-08-18 104 views

回答

11

使用Colorzilla的gradient generator,只需設置兩種顏色相同%的位置,你會得到兩種顏色之間的硬邊。

background: #ffff00; /* Old browsers */ 
background: -moz-linear-gradient(top, #ffff00 30%, #ffff00 30%, #fe0000 30%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,#ffff00), color-stop(30%,#ffff00), color-stop(30%,#fe0000)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #ffff00 30%,#ffff00 30%,#fe0000 30%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #ffff00 30%,#ffff00 30%,#fe0000 30%); /* Opera11.10+ */ 
background: -ms-linear-gradient(top, #ffff00 30%,#ffff00 30%,#fe0000 30%); /* IE10+ */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#fe0000',GradientType=0); /* IE6-9 */ 
background: linear-gradient(top, #ffff00 30%,#ffff00 30%,#fe0000 30%); /* W3C */ 
+3

這似乎不適用於Chrome中的大高度。 http://codepen.io/codecarson/pen/umesI – manafire

5

Colorzilla的梯度發生器是一個不錯的開始,但代碼在我看來是糟糕的。
你永遠不會很容易地看到顏色是否正確,沒有像#ff0這樣的短十六進制代碼輸出 - 與上述答案相比,最重要的是W3C標準已更改爲to <side-or-corner>

因此,與相同高度紅色和黃色區域時給定的平坦梯度後,你的問題,這是我的首選代碼:

background-color: #ff0; /* Old browsers */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #ff0), color-stop(50%, #ff0), color-stop(50%, #fe0000)); /* Chrome, Safari4+ */ 
background-image: -webkit-linear-gradient(top, #ff0 50%, #ff0 50%, #fe0000 50%); /* Chrome10+, Safari5.1+ */  
background-image: -moz-linear-gradient(top, #ff0 50%, #ff0 50%, #fe0000 50%); /* Fx3.6+ */ 
background-image:   linear-gradient(  #ff0 50%, #ff0 50%, #fe0000 50%); /* W3C */ 

See example on CodePen

另外請注意,在這種情況下,您可以省略IE不推薦使用的filter屬性,只是因爲沒有包含色塊。
如果您知道包裝盒的確切高度,則也可以使用px值而不是用於色塊的%值。

更新2016年1月16日:既不-o-廠商前綴是必要的,也不-ms-(如IE 10是第一IE以支持梯度和它支持的W3C標準語法)。見http://caniuse.com/#feat=css-gradients
更新2016-01-27:更喜歡lowercase hex color values for better gzipping,並且清楚地指出background-colorbackground-image而不是background。也刪除了to bottom,因爲它是默認值。