CSS3 radial-gradient()徑向漸變

admin發表於2018-07-20

radial-gradient()用來定義徑向漸變;線性漸變可以參閱CSS3 linear-gradient()線性漸變一章節。

從漸變的名稱我們可以得到一些關於此漸變的端倪,也就是從圓心位置沿著半徑的漸變效果。

語法結構:

[CSS] 純文字檢視 複製程式碼
radial-gradient(   [ circle || <length> ] [ at <position> ]? ,
                 | [ ellipse || [<length> | <percentage> ]{2}] [ at <position> ]? ,
                 | [ [ circle | ellipse ] || <extent-keyword> ] [ at <position> ]? ,
                 | at <position> ,
                 <color-stop> [ , <color-stop> ]+ )

引數解析:

(1).circle:規定徑向漸變為圓形。

(2).ellipse:規定徑向漸變為橢圓形。

(3).at <position>:規定圓心的座標位置。

(4).<extent-keyword>:規定映象漸變半徑大小(當然也可以使用畫素或者百分比,但是圓形徑向漸變不能夠使用百分比)的關鍵詞:closest-side, closest-corner, farthest-side, farthest-corner, contain 和 cover,這裡暫且不介紹,後面會有詳細的介紹。

(5).<color-stop>:規定起止顏色。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset="gb2312"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
div{
  width:150px;
  height:80px;
  margin:20px;
}
.antzone{
  background:radial-gradient(#ace, #f96, #1E90FF);
}
</style>
</head>
<body>
<div class="antzone"></div>
</body>
</html>

如果沒有規定圓心的位置,那麼值都是center。

圓心的位置除了使用百分比和畫素之外,還有幾個關鍵字,那就是left、top、bottom和right。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<meta charset="gb2312"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
div{
  width:150px;
  height:80px;
  margin:20px;
}
.antzone{
  background:radial-gradient(at left bottom,#ace, #f96, #1E90FF);
}
</style>
</head>
<body>
<div class="antzone"></div>
</body>
</html>

上面的程式碼規定了徑向漸變的圓心座標left bottom,也就是圓心在矩形的左下角。

我們也可以顯示的規定徑向漸變的形狀,程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset="gb2312"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
div{
  width:150px;
  height:80px;
  margin:20px;
}
.antzone{
  background:radial-gradient(circle ,#ace, #f96, #1E90FF);
}
</style>
</head>
<body>
<div class="antzone"></div>
</body>
</html>

上面的程式碼可以規定徑向漸變的形狀為圓形。

我們也可以規定徑向漸變半徑的尺寸,程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset="gb2312"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
div{
  width:150px;
  height:80px;
  margin:20px;
}
.closest-side{
  background:radial-gradient(closest-side,#ace, #f96, #1E90FF);
}
.closest-corner{
  background:radial-gradient(closest-corner,#ace, #f96, #1E90FF);
}
.farthest-side{
  background:radial-gradient(farthest-side,#ace, #f96, #1E90FF);
}
.farthest-corner{
  background:radial-gradient(farthest-corner,#ace, #f96, #1E90FF);
}
.contain{
  background:-webkit-radial-gradient(contain,#ace, #f96, #1E90FF);
}
.cover{
  background:-webkit-radial-gradient(cover,#ace, #f96, #1E90FF);
}
</style>
</head>
<body>
<div class="closest-side"></div>
<div class="closest-corner"></div>
<div class="farthest-side"></div>
<div class="farthest-corner"></div>
<div class="contain"></div>
<div class="cover"></div>
</body>
</html>

特別說明:contain和cover在當前需要加各自瀏覽器的字首,這裡只相容谷歌瀏覽器。

下面介紹一下關鍵字的含義:

(1).closest-side:指定徑向漸變的半徑長度為從圓心到離圓心最近的邊。 

(2).closest-corner:指定徑向漸變的半徑長度為從圓心到離圓心最近的角。 

(3).farthest-side:指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊。 

(4).farthest-corner:指定徑向漸變的半徑長度為從圓心到離圓心最遠的角。 

(5).contain:包含,指定徑向漸變的半徑長度為從圓心到離圓心最近的點。類同於closest-side。 

(6).cover:覆蓋,指定徑向漸變的半徑長度為從圓心到離圓心最遠的點。類同於farthest-corner。

圖示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201807/20/010315x8ric6vfu8yfldfy.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

相信不用多說,通過這張圖就很容易理解。

當然我們也可以使用自定義的徑向漸變的半徑長度,程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset="gb2312"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
div{
  width:150px;
  height:80px;
  margin:20px;
}
.circle{
  background:radial-gradient(circle 100px,#ace, #f96, #1E90FF);
}
.ellipse{
  background:radial-gradient(ellipse 100px 50px,#ace, #f96, #1E90FF);
}
</style>
</head>
<body>
<div class="circle"></div>
<div class="ellipse"></div>
</body>
</html>

人為設定徑向漸變的半徑尺寸,注意,圓形的只需要一個引數就可以,橢圓形需要兩個,這個顯而易見。

和線性漸變同樣的道理,我們也可以規定漸變的區域,原理是一樣的,程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset="gb2312"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
div{
  width:250px;
  height:250px;
}
.circle{
  background:radial-gradient(circle,#ace 30%, #f96 80%);
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>

上面的程式碼規定了漸變線30%-80%之間為漸變區域,其他為實色。

相關文章