CSS放射状グラデーションの使い方-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS放射状グラデーションの使い方

藏色散人

Dec 22, 2020 am 09:58 AM

css

CSS 放射状グラデーションの使用方法: 最初に HTML サンプルファイルを作成し、次に div ブロックを作成し、最後に CSS スタイルを「background:radial-gradient()」として追加して放射状グラデーション効果を実現します。

CSS放射状グラデーションの使い方

このチュートリアルの動作環境: Windows7 システム、HTML5&&CSS3 バージョンこの方法は、すべてのブランドのコンピューターに適しています。

推奨: "css ビデオチュートリアル "

放射状グラデーション: 開始点から終了点まで、色は内側から外側に向かって円形のグラデーションを実行します。

構文

background:radial-gradient(center,shape size,start-color,……,last-color);

ログイン後にコピー

放射状グラデーション - 形状の設定

構文:

background:radial-gradient(shape,start-color,……,last-color);

ログイン後にコピー

説明:

形状値は 2 つを指定できます

circle——circle

ellipse——ellipse (デフォルト)

radial gradient-size キーワード

size キーワードは、OK 色の位置の最後です。デフォルト値は最遠隅です。

Syntax

background:radial-gradient(size,start-color,……,last-color);

ログイン後にコピー

size 値は次の 4 つのキーワードです。

closest-side: 最も近い側

farthest-side: 最も遠い側

closest-corner: 最も近いコーナー

farthest-corner: 最も遠いコーナー

例:

div {
     width: 300px;
     height: 200px;
     /* Safari 5.1 - 6.0 */
     background: -webkit-radial-gradient(30% 70%, farthest-side, blue, green, yellow, black);
     /* Opera 11.6 - 12.0 */
     background: -o-radial-gradient(30% 70%, farthest-side, blue, green, yellow, black);
     /* Firefox 3.6 - 15 */
     background: -moz-radial-gradient(30% 70%, farthest-side, blue, green, yellow, black);
     /* 标准的语法 */
     background: radial-gradient(30% 70%, farthest-side, blue, green, yellow, black);
   }

ログイン後にコピー

放射状グラデーション円の中心位置

文法:

background:radial-gradient(level-percent vertical-percent,start-color,……,last-color);

ログイン後にコピー

注: 円の中心にある標準構文は、現在主流のブラウザではあまりサポートされていないため、ブラウザのプレフィックスの追加には注意する必要があります。

一般的な使用法:

-webkit-background:radial-gradient(level-percent vertical-percent,start-color,……,last-color);
-o-background:radial-gradient(level-percent vertical-percent,start-color,……,last-color);
-moz-background:radial-gradient(level-percent vertical-percent,start-color,……,last-color);
background:radial-gradient(level-percent vertical-percent,start-color,……,last-color);

ログイン後にコピー

考え方: 1. グラデーションの色の背後にあるパーセンテージ値は何を意味しますか?

3-12 プログラミング演習

皆さん、私は CSS3 放射状グラデーションを学習しました。レンダリングによると、次のことを実現するコードを追加しました:

(1) 中心 (60% 40%) を開始点として、中心を設定します。円から最も近いエッジ、最も丸いエッジ、4 つの放射状グラデーション効果:最も近いコーナーと最も丸いコーナー。

(2) 放射状グラデーションの形状は円です

(3) 色は内側から外側に向かって赤、黄、緑、青です

エフェクトの画像は次のとおりです

CSS放射状グラデーションの使い方

タスク

4 つの要素のそれぞれに背景色の放射状グラデーションを設定します

(1)設定最も近いエッジ、最も遠いエッジ、最も近いコーナー、最も遠いコーナーまでの放射状のグラデーションサイズ

(2)グラデーションの中心は 60% と 40%です

(3)グラデーションの形状グラデーションは円です

(4) グラデーションの色は内側から外側に向かって赤、黄、緑、青です。

参照コード:

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
 
    <title>径向渐变</title>
    <style>
        div {
            width: 200px;
            height: 300px;
            float: left;
            margin: 100px 0 0 100px;
        }
 
        /* 补充代码，分别写出4个元素的背景渐变效果 */
 
        .div1 {
            background: -webkit-radial-gradient(60% 40%,closest-side circle, red,yellow,green,blue);
            /* Opera 11.6 - 12.0 */
            background: -o-radial-gradient(60% 40%,closest-side circle, red,yellow,green,blue);
            /* Firefox 3.6 - 15 */
            background: -moz-radial-gradient(60% 40%,closest-side circle, red,yellow,green,blue);
            /* 标准的语法 */
            background: radial-gradient(60% 40%,closest-side circle, red,yellow,green,blue);
        }
        .div2 {
            background: -webkit-radial-gradient(60% 40%,farthest-side circle, red,yellow,green,blue);
            /* Opera 11.6 - 12.0 */
            background: -o-radial-gradient(60% 40%,farthest-side circle, red,yellow,green,blue);
            /* Firefox 3.6 - 15 */
            background: -moz-radial-gradient(60% 40%,farthest-side circle, red,yellow,green,blue);
            /* 标准的语法 */
            background: radial-gradient(60% 40%,farthest-side circle, red,yellow,green,blue);
        }
        .div3 {
            background: -webkit-radial-gradient(60% 40%,closest-corner circle, red,yellow,green,blue);
            /* Opera 11.6 - 12.0 */
            background: -o-radial-gradient(60% 40%,closest-corner circle, red,yellow,green,blue);
            /* Firefox 3.6 - 15 */
            background: -moz-radial-gradient(60% 40%,closest-corner circle, red,yellow,green,blue);
            /* 标准的语法 */
            background: radial-gradient(60% 40%,closest-corner circle, red,yellow,green,blue);
        }
        .div4 {
            background: -webkit-radial-gradient(60% 40%,farthest-corner circle, red,yellow,green,blue);
            /* Opera 11.6 - 12.0 */
            background: -o-radial-gradient(60% 40%,farthest-corner circle, red,yellow,green,blue);
            /* Firefox 3.6 - 15 */
            background: -moz-radial-gradient(60% 40%,farthest-corner circle, red,yellow,green,blue);
            /* 标准的语法 */
            background: radial-gradient(60% 40%,farthest-corner circle, red,yellow,green,blue);
        }
    </style>
</head>
 
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
 
</html>

ログイン後にコピー

Radial Gradual-Repeating Gradient

background:repeating-radial-gradient(color1 length|percent,color2 length|percent,……);

ログイン後にコピー

3-14 プログラミング演習

皆さん、グラデーションでの CSS3 Radial Repeating Gradient を学習しました。 , 次に、レンダリングを元に、要素の中心を原点とした複数の虹玉の放射状グラデーションの繰り返しを実装するコードを記述します。

(1) 虹の 7 色が必要です。値の範囲は 0% から始まり、一度に 5% ずつ増加します。たとえば、赤は 0%、オレンジは 5%、黄色は 10 % など

(2) ヒント: 虹玉の色は英単語で表現できます

(3) レンダリングは次のとおりです。

CSS放射状グラデーションの使い方

参照コード:

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
 
    <title>径向渐变</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            /* 补充代码 */
            background: -webkit-repeating-radial-gradient(closest-side circle, red 0%,orange 5%,yellow 10%,green 15%,blue 20%,indigo 25%,purple 30%);
            /* Opera 11.6 - 12.0 */
            background: -o-repeating-radial-gradient( closest-side circle,red 0%,orange 5%,yellow 10%,green 15%,blue 20%,indigo 25%,purple 30%);
            /* Firefox 3.6 - 15 */
            background: -moz-repeating-radial-gradient(closest-side circle,red 0%,orange 5%,yellow 10%,green 15%,blue 20%,indigo 25%,purple 30%);
            /* 标准的语法 */
            background: repeating-radial-gradient( closest-side circle, red 0%,orange 5%,yellow 10%,green 15%,blue 20%,indigo 25%,purple 30%);
        }
    </style>
</head>
 
<body>
    <div></div>
 
</body>
 
</html>

ログイン後にコピー

以上がCSS放射状グラデーションの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

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

7542

CakePHP チュートリアル

1381

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

Win11 Activation Key Permanent

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

Related knowledge

HTML、CSS、およびJavaScriptの役割：コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

VueでBootstrapの使用方法 Apr 07, 2025 pm 11:33 PM

vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。

ブートストラップにスプリットラインを書く方法 Apr 07, 2025 pm 03:12 PM

ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。

ブートストラップのサイズを変更する方法 Apr 07, 2025 pm 03:18 PM

Bootstrapの要素のサイズを調整するには、次のものを含むDimensionクラスを使用できます。

ブートストラップに写真を挿入する方法 Apr 07, 2025 pm 03:30 PM

ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。

ブートストラップのフレームワークをセットアップする方法 Apr 07, 2025 pm 03:27 PM

Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。

ブートストラップの日付を表示する方法 Apr 07, 2025 pm 03:03 PM

回答：ブートストラップの日付ピッカーコンポーネントを使用して、ページで日付を表示できます。手順：ブートストラップフレームワークを紹介します。 HTMLで日付セレクター入力ボックスを作成します。ブートストラップは、セレクターにスタイルを自動的に追加します。 JavaScriptを使用して、選択した日付を取得します。