css3 カラーグラデーション: CSS3 で背景色のグラデーションを実装するにはどうすればよいですか?-CSSチュートリアル-php.cn

css3 カラーグラデーション: CSS3 で背景色のグラデーションを実装するにはどうすればよいですか?

不言

リリース： 2018-09-15 13:42:20

オリジナル

13403 人が閲覧しました

Web ページの美しさを高めるために、CSS3 の背景色のグラデーションがよく使用されます。では、CSS3 の背景色のグラデーションを設定するにはどうすればよいでしょうか。今回はCSSで背景のカラーグラデーションを設定する方法を紹介します。

知っておく必要があるのは、CSS3 グラデーションには css3 線形グラデーションと CSS3 放射状グラデーションの 2 種類があるということです。背景を実現するためのこれら 2 つの CSS3 グラデーションの効果を見てみましょう。色のグラデーションはこんな感じ。

1. css3 線形グラデーションで設定された背景色のグラデーション

まず、css3 線形グラデーションで使用される属性が線形であることを知っておく必要があります。勾配。

構文:linear-gradient(tobottom,colorStrat,colorEnd)

パラメータの意味:

最初のパラメータは、グラデーションの方向を指定します

下へ上から下へ; 右下から左上から右下、左下から右上へ。右下から左上へ、右から左へ左下へ、右上から左下へ

2 番目のパラメータは、グラデーションの開始色を指定します。グラデーションカラー終了カラー

#例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<style>
#grad1 {
    height: 200px;
    background: -webkit-linear-gradient(yellow, green); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(yellow, green)); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(yellow, green)); /* Firefox 3.6 - 15 */
    background: linear-gradient(yellow, green)); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<h3>线性渐变 - 从上到下</h3>
<div id="grad1"></div>
</body>
</html>

ログイン後にコピー

css3 の背景色のグラデーション効果は次のとおりです:

# #2. CSS3 放射状グラデーションで設定された背景色のグラデーション

css3 カラーグラデーション: CSS3 で背景色のグラデーションを実装するにはどうすればよいですか? 放射状グラデーションはその中心によって定義されます。

放射状グラデーションを作成するには、少なくとも 2 つのカラーノードも定義する必要があります。カラーノードは、スムーズな遷移を示したいカラーです。同時に、グラデーションの中心、形状 (円または楕円)、サイズも指定できます。デフォルトでは、グラデーションの中心は center (中心点を表す)、グラデーションの形状は ellipse (楕円を表す)、グラデーションのサイズは farthest-corner (最も遠いコーナーを表す) です。

css3 放射状グラデーションで使用される属性は、radial-gradient です。

構文: 背景: 放射状グラデーション(位置の形状サイズ、開始色、...、最後の色);

例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<style>
#grad1 {
    height: 150px;
    width: 200px;
    background: -webkit-radial-gradient(orange, yellow, pink); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(orange, yellow, pink); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(orange, yellow, pink); /* Firefox 3.6 - 15 */
    background: radial-gradient(orange, yellow, pink); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<h3>径向渐变</h3>
<div id="grad1"></div>
</body>
</html>

ログイン後にコピー

css3 背景色のグラデーション効果は次のとおりです:

css3 グラデーションにおける CSS3 の線形性についてのこの記事はここで終わります。グラデーションと CSS3 放射状グラデーションの詳細については、css3 マニュアルを参照してください。

以上がcss3 カラーグラデーション: CSS3 で背景色のグラデーションを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。