漸變是一個十分重要的視覺效果,可以讓我們的網頁看起來更加炫酷,吸引人眼球。而在 CSS 中,我們可以通過改變漸變的角度來實現不同的漸變效果。
background: linear-gradient(90deg, #f00, #0f0);
在上面的代碼中,我們可以看到linear-gradient
函數中有一個參數90deg
,它表示了漸變的方向。這里的90deg
表示漸變是從上向下的。如果我們將這個值改成0deg
,那么漸變的方向就會變為從左至右。
background: linear-gradient(0deg, #f00, #0f0);
除了可以使用角度來設置漸變方向外,還可以使用關鍵字。如下面的代碼中,我們可以看到關鍵字to right
表示漸變方向是從左到右。同樣,我們也可以使用to left
、to top
、to bottom
等等來表示不同的漸變方向。
background: linear-gradient(to right, #f00, #0f0);
總的來說,CSS 中的漸變可以讓我們的網頁變得更加美觀,而了解如何控制漸變的角度也是必不可少的知識點。