css3中顏色線性漸變色彩的實(shí)現(xiàn)案例

發(fā)布時(shí)間：2020-10-22 16:08:55 來源：億速云閱讀：126 作者：小新欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)css3中顏色線性漸變色彩的實(shí)現(xiàn)案例，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

css3 Gradient分為線性漸變（linear）和徑向漸變（radial）。由于不同的渲染引擎實(shí)現(xiàn)漸變的語法不同，這里我們只針對線性漸變的 W3C 標(biāo)準(zhǔn)語法來分析其用法，其余大家可以查閱相關(guān)資料。語法已經(jīng)得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等瀏覽器的支持。

線性漸變語法：

linear-gradient(to bottom,#FFF,#999)

參數(shù)：第一個(gè)參數(shù)指定漸變方向，可以用角度或英文來表示：
css3中顏色線性漸變色彩的實(shí)現(xiàn)案例

第二個(gè)和第三個(gè)參數(shù)，表示顏色的起始點(diǎn)和結(jié)束點(diǎn)，可以有多個(gè)顏色值

background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);

實(shí)例代碼：

<!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>

效果如下：

css3中顏色線性漸變色彩的實(shí)現(xiàn)案例

關(guān)于css3中顏色線性漸變色彩的實(shí)現(xiàn)案例就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

css3中顏色線性漸變色彩的實(shí)現(xiàn)案例

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽