免费视频爱爱太爽了,亚洲视频一二三四,国产精品va在线观看无码

導讀網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立...

網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言，是因為文本中包含了所謂“超級鏈接”點。

漸變是兩種或多種顏色之間的平滑過渡。以前，必須使用圖像來實現這些效果。但是，通過使用 CSS3 漸變（gradients），可以減少下載的事件和寬帶的使用。此外，漸變效果的元素在放大時看起來效果更好，因為漸變（gradient）是由瀏覽器生成的。漸變又分為線性漸變和徑向漸變兩種。以下是css背景顏色漸變：線性漸變和徑向漸變效果實際案例

一、線性漸變（linear-gradient）

實現線性漸變，至少需要定義兩種顏色，這兩種顏色就是你想平穩過渡的顏色，即：其中一種顏色為起點，另一種顏色為結束點。

語法：

background: linear-gradient(colorA,colorB)

colorA為起點顏色，colorB為結束點顏色。

還可以定義漸變的方向，是從上到下漸變，還是從左至右漸變，又或者是從左上角至右下角漸變（默認情況下是從上至下漸變的）。

語法：

background: linear-gradient(direction,colroA,colorB)

direction表示漸變的方向，直接寫方向的起點即可，比如：漸變方向為從左至右，直接寫left即可；漸變方向為從下至上，直接寫bottom即可；漸變方向從左上角至右下角，書寫為background: linear-gradient(left top,colorA,colorB)。

css線性漸變案例

舉例：從左下角至右上角，從紅色到藍色的漸

效果圖：

線性漸變.png

代碼：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
   div{
    width: 400px;
    height: 200px;
    background: -webkit-linear-gradient(left bottom,red,blue);
    background: -o-linear-gradient(left bottom,red,blue);
    background: -moz-linear-gradient(left bottom,red,blue);
    background: linear-gradient(left bottom,red,blue);
   }
  </style>
 </head>
 <body>
  <div></div>
 </body>
</html>

二、徑向漸變（radial-gradient）

CSS3徑向漸變是圓形或橢圓形的漸變。顏色不再沿著一條直線軸變化，而是從一個起點向所有方向發射。它比線性漸變更復雜。

可以定義它的中心(默認漸變是中心是center)、形狀（原型或者橢圓形）、大小等。

語法：background: radial-gradient(position,shape，size,start-color,last-color)

position
<length>：用長度值指定徑向漸變圓心的橫坐標或縱坐標。可以為負值。
<percentage>：用百分比指定徑向漸變圓心的橫坐標或縱坐標。可以為負值。
left：設置左邊為徑向漸變圓心的橫坐標值。
center：設置中間為徑向漸變圓心的橫坐標值或縱坐標。
right：設置右邊為徑向漸變圓心的橫坐標值。
top：設置頂部為徑向漸變圓心的縱標值。
bottom：設置底部為徑向漸變圓心的縱標值。

shape
可以是值 circle 或 ellipse。circle 表示圓形，ellipse 表示橢圓形。默認值是 ellipse。

size
closest-side：指定徑向漸變的半徑長度為從圓心到離圓心最近的邊；
closest-corner：指定徑向漸變的半徑長度為從圓心到離圓心最近的角；
farthest-side：指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊；
farthest-corner：指定徑向漸變的半徑長度為從圓心到離圓心最遠的角；默認值

css徑向漸變案例

舉例：從60%，55%的位置開始漸變，指定徑向漸變的半徑長度為從圓心到離圓心最近的邊，從內向外漸變顏色為blue,green,yellow,black

效果圖：

徑向漸變

代碼：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
   div{
    width: 400px;
    height: 200px;
    background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); 
     background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
    background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
    background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
   }
  </style>
 </head>
 <body>
  <div></div>
 </body>
</html>

以上，介紹了漸變的相關用法，包括經向漸變和線性漸變，希望對你有幫助！

以上就是css背景顏色漸變案例：線性漸變和徑向漸變效果實例詳解的詳細內容，更多請關注php中文網其它相關文章！

網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。

溫馨提示：喜歡本站的話，請收藏一下本站！

當前位置:雨林木風下載站 > 網頁設計教程 > 詳細頁面

css背景顏色漸變案例：線性漸變與徑向漸變效果案例詳細說明

本類教程下載

系統下載排行