css3 radius-gradient() 放射狀グラデーション
放射狀グラデーション: 開(kāi)始點(diǎn)から終了色まで、內(nèi)側(cè)から外側(cè)に向かって円形のグラデーションを作成します。 (中心から外側(cè)に向かって引っ張ります)。
css3のradial-gradient()の放射狀グラデーションの詳細(xì)説明:
グラデーションには放射狀グラデーションと線(xiàn)形グラデーションが含まれます。線(xiàn)形グラデーションについては、css3のlinear-gradient線(xiàn)形グラデーションの詳細(xì)な説明を參照してください。
同様に、一部のブラウザでは古い構(gòu)文が使用されていましたが、ここでは紹介しません。放射狀グラデーションの最新の構(gòu)文です。
このグラデーションについては、グラデーションの名前からヒントを得ることができます。これは、円の中心から半徑に沿ったグラデーション効果です。
文法構(gòu)造:
radial-gradient( [ circle || <length> ] [ at <position> ]? ,
| [ ellipse || [<length> | <percentage> ]{2}] [ at <position> ]? ,
| [ [ circle | ellipse ] || <extent-keyword> ] [ at <position> ]? ,
| at <position> ,
<color-stop> [ , <color-stop> ]+ )パラメータ分析:
(1).circle: 放射狀グラデーションが円になることを指定します。
(2).ellipse: 放射狀グラデーションが楕円になることを指定します。
(3).at
(4).<extent-keyword>: ミラー グラデーションの半徑サイズを指定するキーワード (もちろんピクセルまたはパーセンテージも使用できますが、円形の放射狀グラデーションにはパーセンテージを使用できません): 最近接側(cè)、最近接コーナー、 farthest -side、farthest-corner、contain、cover については今回は紹介しませんが、後で詳しく紹介します。
(5).<color-stop>: 開(kāi)始色と終了色を指定します。
コード例:
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
div{
width:150px;
height:80px;
margin:20px;
}
.antzone{
background:radial-gradient(#ace, #f96, #1E90FF);
}
</style>
</head>
<body>
<div class="antzone"></div>
</body>
</html>
円の中心の位置が指定されていない場(chǎng)合、値はcenterになります。
円の中心の位置にパーセンテージとピクセルを使用することに加えて、左、上、下、右などのキーワードもいくつかあります。
コード例は次のとおりです:
<meta charset="gb2312">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
div{
width:150px;
height:80px;
margin:20px;
}
.antzone{
background:radial-gradient(at left bottom,#ace, #f96, #1E90FF);
}
</style>
</head>
<body>
<div class="antzone"></div>
</body>
</html>
上記のコードは、放射狀グラデーションの左下の中心座標(biāo)を指定します。つまり、円の中心は長(zhǎng)方形の左下隅にあります。
放射狀グラデーションの形狀を明示的に指定することもできます。コード例は次のとおりです。
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
div{
width:150px;
height:80px;
margin:20px;
}
.antzone{
background:radial-gradient(circle ,#ace, #f96, #1E90FF);
}
</style>
</head>
<body>
<div class="antzone"></div>
</body>
</html>
上記のコードは、放射狀グラデーションの形狀を円として指定できます。
放射狀のグラデーション半徑のサイズを指定することもできます。コード例は次のとおりです。
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
div{
width:150px;
height:80px;
margin:20px;
}
.closest-side{
background:radial-gradient(closest-side,#ace, #f96, #1E90FF);
}
.closest-corner{
background:radial-gradient(closest-corner,#ace, #f96, #1E90FF);
}
.farthest-side{
background:radial-gradient(farthest-side,#ace, #f96, #1E90FF);
}
.farthest-corner{
background:radial-gradient(farthest-corner,#ace, #f96, #1E90FF);
}
.contain{
background:-webkit-radial-gradient(contain,#ace, #f96, #1E90FF);
}
.cover{
background:-webkit-radial-gradient(cover,#ace, #f96, #1E90FF);
}
</style>
</head>
<body>
<div class="closest-side"></div>
<div class="closest-corner"></div>
<div class="farthest-side"></div>
<div class="farthest-corner"></div>
<div class="contain"></div>
<div class="cover"></div>
</body>
</html>
特記事項(xiàng): 現(xiàn)在、contain と cover にはそれぞれのブラウザのプレフィックスを追加する必要があります。これは Google Chrome とのみ互換性があります。
以下にキーワードの意味を紹介します:
(1).closest-side: 円の中心から円の中心に最も近い辺までの放射狀グラデーションの半徑の長(zhǎng)さを指定します。
(2).closest-corner: 円の中心から円の中心に最も近い角までの放射狀グラデーションの半徑の長(zhǎng)さを指定します。
(3).farthest-side: 円の中心から円の中心から最も遠(yuǎn)い側(cè)までの放射狀グラデーションの半徑の長(zhǎng)さを指定します。
(4).farthest-corner: 円の中心から円の中心から最も遠(yuǎn)い角までの放射狀グラデーションの半徑の長(zhǎng)さを指定します。
(5).contain: 円の中心から円の中心に最も近い點(diǎn)までの放射狀グラデーションの半徑の長(zhǎng)さを指定します。最近接側(cè)と同様。
(6).cover: カバー、円の中心から円の中心から最も遠(yuǎn)い點(diǎn)までの放射狀グラデーションの半徑の長(zhǎng)さを指定します。最果てのコーナーに似ています。
寫(xiě)真は次のとおりです:
多くを言うまでもないことだと思いますが、この寫(xiě)真を通して理解するのは簡(jiǎn)単です。
もちろん、カスタマイズされた放射狀グラデーションの半徑長(zhǎng)さを使用することもできます。コード例は次のとおりです。
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
div{
width:150px;
height:80px;
margin:20px;
}
.circle{
background:radial-gradient(circle 100px,#ace, #f96, #1E90FF);
}
.ellipse{
background:radial-gradient(ellipse 100px 50px,#ace, #f96, #1E90FF);
}
</style>
</head>
<body>
<div class="circle"></div>
<div class="ellipse"></div>
</body>
</html>
線(xiàn)形グラデーションと同様に、グラデーション領(lǐng)域を指定することもできます。 原理は次のとおりです。
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
div{
width:250px;
height:250px;
}
.circle{
background:radial-gradient(circle,#ace 30%, #f96 80%);
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>
