css3實現的徑向漸變和線性漸變程式碼例項

admin發表於2017-02-11
CSSS3

由於css3的實現，原來只能夠通過ps或者其他工具實現的效果也可以輕鬆實現，下面是一段css3實現線性漸變和徑向漸變程式碼例項，希望能夠給需要的朋友帶來參考作用，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title> 
<style type="text/css"> 
*{ 
  marigin:0; 
  padding:0; 
} 
div{ 
  margin-bottom:20px; 
  width:300px; 
  height:100px; 
} 
/*線性漸變樣式*/ 
.linear{
  /* Old browsers */ 
  background-color:#1FA9F4; 
  /* FF3.6+ */ 
  background-image:-moz-linear-gradient(top,#1FA9F4 0%,#001C4E 100%); 
  /* Chrome,Safari4+ */
  background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#1FA9F4),color-stop(100%,#001C4E));
  /* Opera 11.10+ */   
  background-image:-o-linear-gradient(top,#1FA9F4 0%,#001C4E 100%);
  /* IE10+ */  
  background-image:-ms-linear-gradient(top,#1FA9F4 0%,#001C4E 100%); 
  /* W3C */ 
  background-image: linear-gradient(to bottom,#1FA9F4 0%,#001C4E 100%);
  /* IE6-8 */  
  filter:progid<img src="static/image/smiley/default/biggrin.gif" smilieid="3" border="0" alt="">XImageTransform.Microsoft.gradient(startColorstr='#1FA9F4',endColorstr='#001C4E',GradientType=0 ); 
} 
/*徑向漸變樣式*/ 
.circle{
  /* Other browsers*/ 
  background-color:#1FA9F4;
  /* FF3.6+ */ 
  background-image:-moz-radial-gradient(center 80px 45deg, circle farthest-corner, #1FA9F4 0%, #001C4E 100%); 
  /* Chrome,Safari4+ */ 
  background-image:-webkit-gradient(radial,50% 100%,10,50% 50%,90,from(rgba(31,169,244,1)),to(rgba(0,28,78,1))); 
} 
</style> 
</head> 
<body> 
<div class="linear"> 
</div> 
<div class="circle"> 
</div> 
</body> 
</html>

以上程式碼實現了我們的要求，分別實現了簡單的徑向漸變和線性漸變效果。

相關文章