CSS3で色のグラデーション効果を実現する方法-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS3で色のグラデーション効果を実現する方法

王林

Nov 16, 2020 pm 02:36 PM

css3 カラーグラデーション

CSS3 でカラーグラデーション効果を実現する方法: [linear-gradient( yellow, green)] のように、linear-gradient 関数とradial-gradient 関数を使用して、それぞれ線形グラデーション効果と放射状グラデーション効果を実現できます。。

CSS3で色のグラデーション効果を実現する方法

css3 グラデーションには、css3 線形グラデーションと css3 放射状グラデーションの 2 種類があります。

(学習ビデオ共有: css ビデオチュートリアル)

1. 線形グラデーションカラーグラデーション

関数:

linear-gradient () 関数は、2 色以上の線形グラデーションを表す画像を作成するために使用されます。

構文:

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

ログイン後にコピー

値:

direction 角度値を使用して、グラデーションの方向 (または角度) を指定します。
color-stop1、color-stop2、... グラデーションの開始色と終了色を指定するために使用されます。

例:

<!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>

ログイン後にコピー

2. 放射状グラデーション

関数;

radial-gradient() 関数は放射状グラデーションを使用します。画像"。

放射状のグラデーションは中心点によって定義されます。

放射状のグラデーションを作成するには、2 つのストップカラーを設定する必要があります。

構文:

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

ログイン後にコピー

値:

1.shape 円のタイプを決定します

ellipse (デフォルト): 楕円形の放射状グラデーションを指定します。
circle: 円の放射状のグラデーションを指定します

##2、サイズグラデーションのサイズを定義します。可能な値:

farthest-corner (デフォルト): 円の中心から円の中心から最も遠い角までの放射状グラデーションの半径の長さを指定します
nearest-side: 放射状グラデーションを指定します。半径の長さは、円の中心から中心に最も近い側までです。
closest-corner: 放射状グラデーションの半径の長さを、円の中心から指定します。円の中心から中心に最も近い角まで
farthest-side: 円の中心から中心から最も遠い側までの放射状グラデーションの半径の長さを指定します。円

3. 位置はグラデーションの位置を定義します。可能な値:

center (デフォルト): 放射状グラデーション円の中心の座標値を設定します。
top: 上部を放射状グラデーション円の中心の縦座標値に設定します。
bottom: 底部を放射状グラデーション円の中心の縦座標値に設定します。

4. start-color, ..., last-color は、グラデーションの開始色と終了色を指定するために使用されます。

例:

<!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>

ログイン後にコピー

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7500

CakePHP チュートリアル

1377

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

純粋な CSS3 で波の効果を実現するにはどうすればよいですか? (コード例) Jun 28, 2022 pm 01:39 PM

純粋な CSS3 で波の効果を実現するにはどうすればよいですか?この記事ではSVGとCSSアニメーションを使って波のエフェクトを作成する方法をご紹介しますので、お役に立てれば幸いです。

Golang 画像処理: 画像のカラーグラデーションとグレースケールマッピングを実行する方法 Aug 19, 2023 am 08:53 AM

Golang 画像処理: 画像のカラーグラデーションとグレースケールマッピングを実行する方法はじめに: デジタルメディアの発展に伴い、画像処理は私たちの日常生活に不可欠な部分になりました。 Go 言語では、github.com/disintegration/imaging などの画像処理用のライブラリを使用できます。この記事では、このライブラリを使用して画像のカラーグラデーションとグレースケールマッピングを実行する方法を紹介します。 1. ライブラリの導入まず、Go プロジェクトに github.com/ を導入する必要があります

CSSを上手に使って色々な変わった形のボタンを実現（コード付き） Jul 19, 2022 am 11:28 AM

この記事では、頻繁に登場する様々な奇妙な形のボタンをCSSを使って簡単に実現する方法を紹介しますので、ぜひ参考にしてください。

スペースを取らずにCSS内の要素を非表示にする方法 Jun 01, 2022 pm 07:15 PM

2 つの方法: 1. display 属性を使用して、要素に「display:none;」スタイルを追加するだけです。 2. Position 属性と top 属性を使用して、要素の絶対位置を設定し、要素を非表示にします。要素に「position:absolute;top:-9999px;」スタイルを追加するだけです。

CSS3でレースボーダーを実装する方法 Sep 16, 2022 pm 07:11 PM

CSS では、border-image 属性を使用してレースの境界線を実現できます。 border-image 属性では、画像を使用して境界線を作成できます。つまり、境界線に背景画像を追加できます。背景画像をレーススタイルとして指定するだけで済みます。構文「border-image: url (画像パス) は、内側への画像境界線の幅。開始を繰り返すかどうか;"。

テキストカルーセルと画像カルーセルも純粋な CSS を使用して実現できることがわかりました。 Jun 10, 2022 pm 01:00 PM

テキストカルーセルと画像カルーセルを作成するにはどうすればよいですか?皆さんが最初に考えるのはjsを使うかどうかですが、実はテキストカルーセルや画像カルーセルも純粋なCSSでも実現できますので実装方法を見ていきましょう。

CSS3でマウスクリックで画像を拡大する方法 Apr 25, 2022 pm 04:52 PM

実装方法: 1. ":active" セレクターを使用して、画像上のマウスクリックの状態を選択します; 2. 変換属性とscale() 関数を使用して、画像の拡大効果を実現します。構文 "img:active {transform : スケール(x 軸倍率、y 軸倍率);}"。

CSS3でアニメーションの回転速度を設定する方法 Apr 28, 2022 pm 04:32 PM

CSS3 では、「animation-timing-function」属性を使用してアニメーションの回転速度を設定できます。この属性は、アニメーションがサイクルを完了する方法を指定し、アニメーションの速度曲線を設定するために使用されます。構文は「element {アニメーションタイミング関数: 速度属性値;}"。

See all articles

CSS3で色のグラデーション効果を実現する方法

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック