日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

烏蘇網(wǎng)站建設公司創(chuàng)新互聯(lián)建站,烏蘇網(wǎng)站設計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為烏蘇上1000+提供企業(yè)網(wǎng)站建設服務。企業(yè)網(wǎng)站搭建\外貿(mào)營銷網(wǎng)站建設要多少錢，請找那個售后服務好的烏蘇做網(wǎng)站的公司定做！

通過 CSS3 您可以定義三種類型的漸變，分別為線性漸變（通過 linear-gradient() 函數(shù)創(chuàng)建）、徑向漸變（通過 radial-gradient() 函數(shù)創(chuàng)建）和圓錐漸變（通過 conic-gradient() 函數(shù)創(chuàng)建）。另外，您還可以使用 repeating-linear-gradient()、repeating-radial-gradient() 和 repeating-conic-gradient() 函數(shù)來創(chuàng)建重復漸變。

通過 CSS 創(chuàng)建的漸變不僅簡單靈活，而且還省去了使用圖像時所需的加載過程，節(jié)省了網(wǎng)頁的加載時間。另外，通過 CSS 創(chuàng)建的漸變元素可以按任意比例放大或縮小，而且不會降低質(zhì)量。

1. 線性漸變

線性漸變指的是顏色沿一條直線進行漸變（例如右上到下，從左到右等），要創(chuàng)建線性漸變，您至少需要定義兩個色標（色標指的是想要平滑過渡的顏色），若要創(chuàng)建更加復雜的漸變效果，則需要定義更多的色標。創(chuàng)建線性漸變的基本語法如下：

linear-gradient(direction, color-stop1, color-stop2, ...);

參數(shù)說明如下：

• direction 可選值，定義漸變的方向（例如從左到右，從上到下），可以是具體角度（例如 90deg），也可以通過 to 加 left、right、top、bottom 等關(guān)鍵字來表示漸變方向，例如：
  • to left：表示從右到左，相當于 270deg；
  • to right：表示從左到右，相當于 90deg；
  • to top：表示從下到上，相當于 0deg；
  • to bottom：默認值，表示從上到下，相當于 180deg；
  • to right bottom：表示從左上到右下；
  • to right top：表示從左下到右上；
  • to left bottom：表示從右上到左下；
  • to left top：表示從右下到左上。
• color-stop1、color-stop2、...：表示定義的多個色標，在每個色標中除了可以定義顏色外，還可以通過數(shù)值加單位或者百分比的形式定義顏色的起止位置。

【示例】使用 linear-gradient() 函數(shù)定義線性漸變：

運行結(jié)果如下圖所示：

2. 徑向漸變

徑向漸變與線性漸變類型，不同之處在于徑向漸變是由中心向外延申的漸變，您可以指定中心點的位置，也可以設置漸變的形狀。定義徑向漸變的基本語法如下所示：

radial-gradient(shape size at position, color-stop1, color-stop2, ...);

參數(shù)說明如下：

• at：一個關(guān)鍵字，需要放置在參數(shù) position 的前面；
• position：指定漸變起點的坐標，您可以使用數(shù)值加單位、百分比或者關(guān)鍵字（例如 left、bottom 等）等形式指定漸變起點的坐標，如果提供 2 個參數(shù)，那么第一個參數(shù)用來表示橫坐標，第二個參數(shù)用來表示縱坐標，如果只提供一個參數(shù)，那么第二個參數(shù)將被默認設置為 50%，即 center；
• shape：指定漸變的形狀，可選值為 circle（圓形）、ellipse（橢圓）；
• size：指定漸變形狀的大小，除了可以使用具體的數(shù)值來指定 circle、ellipse 的半徑外，還可以使用下面所示的關(guān)鍵字來指定漸變形狀的大小：
  • closest-side：指定徑向漸變的半徑長度為從圓心到離圓心最近的邊；
  • closest-corner：指定徑向漸變的半徑長度為從圓心到離圓心最近的角；
  • farthest-side：默認值，指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊；
  • farthest-corner：指定徑向漸變的半徑長度為從圓心到離圓心最遠的角。
• color-stop1、color-stop2、...：表示定義的多個色標，在每個色標中除了可以定義顏色外，還可以通過數(shù)值加單位或者百分比的形式定義顏色的起止位置。

【示例】使用 radial-gradient() 函數(shù)定義徑向漸變：

運行結(jié)果如下圖所示：

3. 圓錐漸變

圓錐漸變類似于徑向漸變，兩者都有一個中心點作為色標的源點，不同的是圓錐漸變是圍繞中心點旋轉(zhuǎn)（而不是從中心點向往輻射），定義圓錐漸變的基本語法如下：

conic-gradient(from angle at position, start-color, ..., last-color);

語法說明如下：

• from：一個關(guān)鍵字，需要放置在參數(shù) angle 之前；
• angle：定義圓錐漸變的起始角度，可以為空，默認值為 0deg；
• at：一個關(guān)鍵字，需要放置在參數(shù) position 之前；
• position：定義圓錐漸變錐心的坐標，您可以使用數(shù)值加單位、百分比或者關(guān)鍵字（例如 left、bottom 等）等形式指定錐心的坐標，如果提供 2 個參數(shù)，那么第一個參數(shù)用來表示橫坐標，第二個參數(shù)用來表示縱坐標，如果只提供一個參數(shù)，那么第二個參數(shù)將被默認設置為 50%，即 center（居中）；
• start-color、...、last-color：表示定義的多個色標，在每個色標中除了可以定義顏色外，還可以通過百分比或者角度來定義顏色的起始位置。

【示例】使用 conic-gradient() 定義圓錐漸變：

運行結(jié)果如下圖所示：

4. 重復漸變

在 CSS 中，您還可以使用 repeating-linear-gradient()、repeating-radial-gradient() 和 repeating-conic-gradient() 等函數(shù)來分別創(chuàng)建線性漸變、徑向漸變和圓錐漸變的重復漸變，所謂重復漸變就是指將漸變的過程重復多次，以鋪滿整個元素。

提示： repeating-linear-gradient()、repeating-radial-gradient() 和 repeating-conic-gradient() 函數(shù)的語法分別與 linear-gradient()、radial-gradient() 和 conic-gradient() 函數(shù)的語法相同。

【示例】使用 repeating-linear-gradient()、repeating-radial-gradient() 和 repeating-conic-gradient() 三個函數(shù)定義重復漸變：

運行結(jié)果如下圖所示：