CSS3 背景漸變

admin發表於2018-05-21
CSSS3

通過background屬性可以設定元素的背景色或者背景圖片。

更多內容可以參閱CSS background背景一章節。

背景色也可以是以漸變形式存在的，程式碼演示如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
div{
  width:150px;
  height:80px;
  margin:20px;
}
.left{
  background:-webkit-linear-gradient(left, #ace,#f96 );
  background:-moz-linear-gradient(left, #ace,#f96 );
  background:-o-linear-gradient(left,#ace,#f96);
}
.top{
  background:-webkit-linear-gradient(top, #ace,#f96 );
  background:-moz-linear-gradient(top, #ace,#f96 );
  background:-o-linear-gradient(top,#ace,#f96);
}
.lefTop{
  background:-webkit-linear-gradient(left top, #ace,#f96 );
  background:-moz-linear-gradient(left top, #ace,#f96 );
  background:-o-linear-gradient(left top,#ace,#f96);
}
.more{
  background:-webkit-linear-gradient(left, #ace, #f96, #0094ff );
  background:-moz-linear-gradient(left, #ace, #f96, #0094ff );
  background:-o-linear-gradient(left, #ace, #f96, #0094ff);
}
</style>
</head>
<body>
<div class="left"></div>
<div class="top"></div>
<div class="lefTop"></div>
<div class="more"></div>
</body>
</html>

相關文章