css3線形勾配線形勾配
線形グラデーション: 軸 (水平または垂直) に沿って色を変更し、開始点から終了色まで順次グラデーションを実行します (一方の側からもう一方の側に引っ張ります)。
css3のlinear-gradient線形グラデーションの詳しい説明:
gradientにはlinear-gradient線形グラデーションとradial-gradient放射状グラデーションが含まれます。
この章では線形グラデーションのみを紹介します。放射状グラデーションについては、CSS3 の放射状グラデーションの章を参照してください。
現在人気のあるブラウザ カーネルには主に次のものが含まれます:
(1)。
(2).WebKit (Safari、Chrome など)。
(3) Opera (Opera ブラウザ)。
(4) Trident (IE ブラウザ)、IE9 以降のブラウザはこの属性をサポートしています。
線形グラデーションの最新の構文は基本的に同じです (Google Chrome にも比較的古い構文構造があり、これについては後で紹介します)。
文法構造:
linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
パラメータ分析:
(1)。[<point> || <angle>]: 線形グラデーションの方向を指定する場合はオプション。ポイント値は、左、上、右、下、またはそれらの適切な組み合わせにすることができます。 left は左から右、top は上から下、左上は左上隅から右下隅などを意味します。 Angleは角度を指定しますが、これについては後で紹介します。
(2).<stop>: 必須。2 番目と 3 番目のパラメーターはそれぞれ開始点の色と終了点の色です。もちろん、複数の色のグラデーションを表すために、さらに多くのパラメーターをそれらの間に挿入できます。
図は次のとおりです:
Google Chrome の古いバージョンにも次のような文法構造があります:
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
この記事はこの文法構造を放棄しています。興味のある方は、こちらをご覧ください。自分たちも一度。
コード例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</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>
上記のコードは、線形グラデーションの基本的な使用法を示しています。引き続き詳しく紹介します。
前のデモでは、色の位置が指定されていなかったため、グラデーションが均等に分散されました。実際には、グラデーションの領域を制御できます。
コード例は以下の通りです。
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:150px;
height:80px;
margin:20px;
}
.antzone{
background:-webkit-linear-gradient(left, #ace 80%, #f96);
background:-moz-linear-gradient(left, #ace 80%, #f96);
background:-o-linear-gradient(left,#ace 80%, #f96);
}
</style>
</head>
<body>
<div class="antzone"></div>
</body>
</html>
上記のコードはグラデーションの範囲を規定しています。2番目の色が指定されていないため、グラデーションの終了位置は100になります。 %。つまり、80% より前の位置はグラデーション効果のない単色であり、80% ～ 100% の間の領域はグラデーションになります。もう一度コード例を見てみましょう:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:150px;
height:80px;
margin:20px;
}
.antzone{
background:-webkit-linear-gradient(left, #ace 30%, #f96 80% );
background:-moz-linear-gradient(left, #ace 30%, #f96 80%);
background:-o-linear-gradient(left,#ace 30%, #f96 80%);
}
</style>
</head>
<body>
<div class="antzone"></div>
</body>
</html>
上記のコードでは、30%から80%の間の領域がグラデーション領域であり、それ以外の領域が単色であると規定されています。
角度の使用について:
記事の冒頭で紹介した構文構造では、次のように最初のパラメータを角度にすることもできます:
linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
それは水平線とグラデーション線によって生成される角度です。反時計回り 、角度を指定しない場合は、開始位置に基づいて角度が自動的に定義されます。
コード例は次のとおりです。
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:150px;
height:80px;
margin:20px;
}
.antzone{
background:-webkit-linear-gradient(30deg,#ace,#f96);
background:-moz-linear-gradient(30deg,#ace,#f96);
background:-o-linear-gradient(30deg,#ace,#f96);
}
</style>
</head>
<body>
<div class="antzone"></div>
</body>
</html>
グラデーション角度は静的であり、観察と理解に役立たない可能性があります。以下に継続的な設定効果を示します。
コード例は次のとおりです:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:150px;
height:80px;
margin:20px;
}
.antzone{
background:-webkit-linear-gradient(0deg,#ace,#f96);
background:-moz-linear-gradient(0deg,#ace,#f96);
background:-o-linear-gradient(0deg,#ace,#f96);
}
</style>
<script>
window.onload = function () {
var odiv = document.getElementsByTagName("div")[0];
var obt = document.getElementById("bt");
obt.onclick = function () {
var timer = null;
var count = 0;
timer = setInterval(function () {
if (count == 360) {
clearInterval(timer);
}
count = count + 1;
odiv.style.background = "-webkit-linear-gradient(" + count + "deg,#ace,#f96)";
odiv.style.background = "-moz-linear-gradient(" + count + "deg,#ace,#f96)";
odiv.style.background = "-o-linear-gradient(" + count + "deg,#ace,#f96)";
}, 100)
}
}
</script>
</head>
<body>
<div class="antzone"></div>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>
ボタンをクリックすると、角度を動的に設定する効果が表示され、理解に役立ちます。
透明度の適用:
線形グラデーションを透明度に適用することもできます。 コード例は次のとおりです。
![フロントエンドプロジェクト-Shangyou [HTML/CSS/JS技術総合演習]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Apipost 実用化 [API、インターフェース、自動テスト、モック]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
