ホームページ > 記事 > ウェブフロントエンド > CSS3で放射状のグラデーション効果を実現する方法
CSS3で放射状のグラデーション効果を実現する方法
- 藏色散人オリジナル
- 2018-11-29 15:11:205573ブラウズ
放射状グラデーション効果を実現する CSS3 メソッド: 最初に HTML サンプル ファイルを作成し、次に本文に div を作成します。最後に「background:radial-gradient(#4b6c9c,#5ac4ed)」を通じて放射状グラデーション効果を実装します。 ;" スタイル グラデーション効果に向けて。
CSS3 を紹介しました 。
引き続き、簡単な例を通して CSS3 の放射状グラデーションの効果を紹介していきます。
いわゆる放射状グラデーションは、中心から開始して定義されます。 コード例は次のとおりです:
<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
<title>CSS3创建径向渐变效果示例</title>
<style type="text/css">
.container{
text-align:center;
padding:20px 0;
width:960px;
margin: 0 auto;
}
.container div{
width:200px;
height:150px;
display:inline-block;
margin:2px;
color:#ec8007;
vertical-align: top;
line-height: 230px;
font-size: 20px;
}
.radial{
background:radial-gradient(#4b6c9c,#5ac4ed);
}
</style>
</head>
<body>
<div class="container">
<div class="radial">Radial径向渐变</div>
</div>
</body>
</html>グラデーション効果は次のとおりです:
#上の図は、色 #ff5309 から #efdf0e への移行です。
background: radial-gradient(center, shape size, start-color, ..., last-color);
デフォルトでは、放射状グラデーション方法では、カラー ノードが均等に分散され、グラデーションの形状が決まります。は楕円です。
注:
グラデーションの中心は center、つまり中心点にあることを意味します。##グラデーションの形状は楕円、つまり楕円です。
グラデーションのサイズは最も遠いコーナーであり、最も遠いコーナーまでを示します。
この記事は、CSS3 で放射状のグラデーション効果を実現する方法の紹介です。これも非常に簡単で理解しやすいと思います。困っている友達に！
推奨される参考学習:「CSS3 チュートリアル 」
以上がCSS3で放射状のグラデーション効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSS:不定セレクターの使い方次の記事：CSS:不定セレクターの使い方