CSS3 radial-gradient()徑向漸變

admin發表於2018-07-20
CSSS3

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%之間為漸變區域，其他為實色。

相關文章