站長資訊網
css中，可利用“background-image”屬性和“linear-gradient()”函數來設置背景向兩個方向漸變，語法為“元素{background-image:linear-gradient(方向,顏色1,顏色2,顏色3}”。
本教程操作環境：windows10系統、CSS3&&HTML5版、Dell G3電腦。
css怎樣設置背景向兩個方向漸變
在css中，可以利用background-image屬性和linear-gradient()函數來實現想兩個方向漸變。
background-image 屬性為元素設置背景圖像。
linear-gradient() 函數用于創建一個表示兩種或多種顏色線性漸變的圖片。
創建一個線性漸變，需要指定兩種顏色，還可以實現不同方向（指定為一個角度）的漸變效果，如果不指定方向，默認從上到下漸變。
設置背景向上漸變為紅色，向下漸變為藍色，示例如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>123</title> <style> div{ height: 200px; width:300px; background-image: linear-gradient(red,transparent,blue); } </style> </head> <body> <p>從頭部開始的線性漸變，從紅色開始，轉為透明，再到藍色:</p> <div></div> </body> </html>
輸出結果：
（學習視頻分享：css視頻教程）
