css3線性漸變簡單程式碼例項

admin發表於2017-02-19
CSSS3
本章節分享幾段最為簡單的線性漸變的程式碼例項，初學者可以做一下參考。

關於線性漸變可以參閱css3 linear-gradient一章節。

程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>螞蟻部落</title>
<style>
#antzone{
  width:300px;
  height:200px;
  background:-webkit-linear-gradient(red, blue);/*webkit核心瀏覽器相容程式碼*/  
  background:-o-linear-gradient(red, blue);/*Opera瀏覽器相容程式碼*/  
  background:-moz-linear-gradient(red, blue);/*Firefox 瀏覽器相容程式碼*/  
  background:linear-gradient(red, blue) /*標準語法要放在最後 */   
}
</style>
</head>
<body>
<div id="antzone"></div>
</body>
</html>

上面你的程式碼實現了由上到下的漸變效果，當然我們也可以設定其他漸變方向。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>螞蟻部落</title>
<style>
#antzone{
  width:300px;
  height:200px;
  background:-webkit-linear-gradient(left,red, blue);/*webkit核心瀏覽器相容程式碼*/  
  background:-o-linear-gradient(left,red, blue);/*Opera瀏覽器相容程式碼*/  
  background:-moz-linear-gradient(left,red, blue);/*Firefox 瀏覽器相容程式碼*/  
  background:linear-gradient(left,red, blue) /*標準語法要放在最後 */   
}
</style>
</head>
<body>
<div id="antzone"></div>
</body>
</html>

上面的程式碼設定漸變是由左到右。我們也可以設定漸變的角度，其實也可以說是控制漸變的方向。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>螞蟻部落</title>
<style>
#antzone{
  width:300px;
  height:200px;
  background:-webkit-linear-gradient(45deg,red, blue);/*webkit核心瀏覽器相容程式碼*/  
  background:-o-linear-gradient(45deg,red, blue);/*Opera瀏覽器相容程式碼*/  
  background:-moz-linear-gradient(45deg,red, blue);/*Firefox 瀏覽器相容程式碼*/  
  background:linear-gradient(45deg,red, blue) /*標準語法要放在最後 */   
}
</style>
</head>
<body>
<div id="antzone"></div>
</body>
</html>

相關文章