對於線性漸變，「頂部」和「頂部」方向相同嗎？

linear-gradient()的瀏覽器實現已經發展爲支持top和to top作爲錨值。他們是相同的方向還是相反的？對於線性漸變，「頂部」和「頂部」方向相同嗎？

來源

2013-10-21 hurrymaplelad

他們是對立面。 to top使用元素底部的第一個顏色參數，而top使用頂部的第一個顏色參數。

這是fiddle。 MDN有full details and history。

來源

2013-10-21 05:13:27 hurrymaplelad

您應該將其餘的前綴添加到您的小提琴中。 – BoltClock

@BoltClock你抓到了我。希望我可以穿過那個。現在有很多種類。沒有被迫添加舊的webkit和即咒語。 – hurrymaplelad

哈哈對不起，你要避免碰到我 - 我對這種事很挑剔。我贊成你的回答，因爲這是正確的，但我添加了自己的專題來擴展這個主題。 – BoltClock

他們是不是相同的方向;他們是相反的。

to top是「從下到上」的縮寫，而top的意思是「從上開始」。這不僅適用於其他方面，也適用於角落，如top right和bottom left。

兩個定向關鍵字語法都記錄在CSS圖像級別3模塊中，這就是爲什麼很多實現早期使用舊語法的原因。使用傳統語法的最後一個公共工作草案是here;你可以看到一個音符，承認它周圍的含糊不清，最終導致在後續修訂中使用關鍵字to。最新版本是here。

Some browsers support both syntaxes用於指示在它們的供應商特定的-*-linear-gradient()函數的線性梯度的方向，然而，應該注意的是，標準化的函數linear-gradient()只接受與to關鍵字新的語法。（如果瀏覽器在前綴中接受這兩種語法，則它或者過時或者違反規範，應該報告。）

還要注意默認方向是舊版語法的top，當前語法的默認方向是to bottom 。這意味着默認方向是相同的，並且不變。

另外值得一提的是，如果你使用-prefix-free，it already accounts for this change，與未成年人需要提醒的是，你需要在單獨的聲明兩種語法：

如果您有兩個版本，級聯，它的工作和忽略後者的版本，如果不是支持它：
background: linear-gradient(top, white, black); 
background: linear-gradient(to bottom, white, black); 

兩個語句只會在需要的前綴瀏覽器作爲前綴，但是無論是瀏覽器的wi將使用級聯來確定它可以使用哪一個。

_{如果有一個from關鍵字，則top和from top將是等效的。}

來源

2013-10-21 06:58:27 BoltClock

好背景！ – hurrymaplelad

對於線性漸變，「頂部」和「頂部」方向相同嗎？

回答

相關問題