CSS3 linear-gradient() 線性漸變

admin發表於2018-07-20
CSSS3

linear-gradient()用來定義線性漸變，下面會分步通過程式碼例項對其進行詳細介紹。

關於徑向漸變相關知識可以參閱CSS3 radial-gradient() 徑向漸變一章節。

當前最新的線性漸變的語法基本一致（有一些比較老的語法結構，下面會介紹）。

語法結構：

[CSS] 純文字檢視 複製程式碼
linear-gradient([ [ [<angle> | to [top | bottom] || [left | right] ],]? <color-stop>[,<color-stop>]+)

特別說明：語法構成看起來有點恐怖，不用擔心，後面有專門的例項演示，其實並沒有那麼複雜。

引數解析:

（1）. [<point> || <angle>,]：可選，用來規定線性漸變的方向；angle規定一個角度，後面有介紹。left、top、right或者bottom，也可以是它們的適當組合。全部可能的值：to left, to right, to top, to bottom, to left top, to left bottom, to right top, to right bottom，分別表示漸變從左往右，從右往左，從上往下，以此類推。

（2）.<stop>：必需，第二個和第三個引數分別是漸變起始點顏色和漸變結束點顏色，當然可以在它們之間插入更多的引數，表示多種顏色漸變。

線性漸變語法格式有多個版本，舉一個例子：

[CSS] 純文字檢視 複製程式碼
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

一切事物都要與時俱進，本文已拋棄這種語法結構，感興趣的朋友可以自己查閱一下。

程式碼例項：

[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:linear-gradient(to left, red,blue);
}
.top{
  background:linear-gradient(to top, red,blue);
}
.lefTop{
  background:linear-gradient(to left top, red,blue);
}
.more{
  background:linear-gradient(to left, red, blue,green);
}
</style>
</head>
<body>
<div class="left"></div>
<div class="top"></div>
<div class="lefTop"></div>
<div class="more"></div>
</body>
</html>

上面的程式碼對於線性漸變的基本用法做了一下演示，非常的簡單，下面我們繼續深入介紹。

前面的演示，都沒有指定顏色的位置，所以漸變是平均分佈的，其實我們可以控制漸變的區域。

程式碼例項如下:

[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;
}
.antzone{
  background:linear-gradient(to left, red 80%, blue);
}
</style>
</head>
<body>
<div class="antzone"></div>
</body>
</html>

上面的程式碼就規定了漸變的範圍，從80%開始進行漸變動作，由於第二個顏色沒有規定，那麼漸變結束位置就是100%。也就是說80%之前的位置是實色沒有漸變效果，80%-100%之間的區域是漸變的。再來看一段程式碼例項:

[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;
}
.antzone{
  background:linear-gradient(to left, red 30%, blue 80% );
}
</style>
</head>
<body>
<div class="antzone"></div>
</body>
</html>

上面的程式碼中就是規定30%-80%之間的區域為漸變區域，其他地方為實色。

[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;
}
.antzone{
  background:linear-gradient(to right, red 80%, blue 70% );
}
</style>
</head>
<body>
<div class="antzone"></div>
</body>
</html>

如果其實漸變色的color-stop大於結束漸變色的color-stop，那麼以實色顯示，很容易理解，不多介紹。

關於angle角度的使用:

關於此知識點具體參閱CSS3 傾斜角度線性漸變一章節。

透明度的應用:

線性漸變也可以應用於透明度上，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset="gb2312"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
div{
  width:350px;
  height:180px;
  margin:20px;
}
.antzone{
  background:linear-gradient(to left,rgba(255,255,255,0),rgba(255,255,255,1)),
    url(mytest/demo/girl.jpg);
}
</style>
</head>
<body>
<div class="antzone"></div>
</body>
</html>

相關文章