本篇文章給大家帶來的內容是關於css3中顏色線性漸層色彩的實現代碼，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。
css3 Gradient分為線性漸層（linear）和放射狀漸層（radial）。由於不同的渲染引擎實現漸層的文法不同，這裡我們只針對線性漸層的 W3C 標準文法來分析其用法，其餘大家可以查閱相關資料。 文法已經得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等瀏覽器的支援。
線性漸層文法：
linear-gradient(to bottom,#FFF,#999)
參數：第一個參數指定漸層方向，可以用角度或英文來表示：
第二個和第三個參數，表示顏色的起始點和結束點，可以有多個顏色值
background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);
執行個體代碼：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Gradient</title> <style type="text/css"> p { width: 400px; height: 150px; line-height: 150px; text-align:center; color: #000; font-size:24px; background-image:linear-gradient(to top left,yellow,blue); } </style> </head> <body> <p>右下角向左上方的線性漸層背景</p> </body> </html>
效果如下：
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
