画像グラデーションと比較した場合、CSS ベースのグラデーションの最大の利点は、変更が簡単で、無段階のスケーリングをサポートしているため、トランジションがより自然になることです。現在、CSS グラデーションを実装できるのは、Webkit および Gecko エンジンをベースとしたブラウザのみです。Presto エンジンをベースとした Opera ブラウザは、現時点ではグラデーションをサポートしていませんが、Trident ベースの IE はフィルタを通じてグラデーションを実現できますが、これはお勧めできません。
Webkit エンジン用の CSS グラデーション デザイン (Safari 4 以降)
基本構文:
-webkit-gradient(
パラメータの説明:
線形グラデーションの基本的な使用法:
/*単純な線形グラデーションの背景色、上から下へ、青から赤へのグラデーション表示*/background: -webkit-gradient(linear, left top, leftbottom, from(blue ) , to(red));
デモ効果:
/*上から中、中から下、青から緑、赤のグラデーション表示*/背景: -webkit -gradient (リニア、左上、左下、from(青)、to(赤)、カラーストップ(50%、緑));
デモ効果:
/*デザイン二重グラデーション、上から下へ、最初は青から白、次に黒から赤 */background: -webkit-gradient(linear, 左上, 左下, from(青), to(赤),color -stop(0.5, #fff) 、color-stop(0.5, #000));
デモ効果:
/*上から順に異なるステップ値を設定して複数のグラデーション効果をデザインします。最初にグラデーションは青から始まります。白に、次に百色から黒に、そして最後に黒から赤に。 */background: -webkit-gradient(linear, 左上, 左下, from(青), to( 赤),color-stop(0.4, # fff), color-stop(0.6, #000));
デモ効果:
概要: color-stop() 関数には 2 つのパラメーター値が含まれています。最初のパラメーター値はコーナー マークの位置を指定します。 2 番目のパラメータはカラーマークの色を指定します。グラデーションには複数のカラー ストップを含めることができます。位置の値は 0 ～ 1 の間の 10 進数、または 0 ～ 100% のパーセンテージで、カラー ストップの位置比率を指定します。
放射状グラデーションの基本的な使い方
/* 同心円（中心座標は200、100）、内円の半径は10、外円の半径は100、内円は外円の半径より小さく、内円の赤から外円へ緑色の放射状グラデーション。外側の円の半径は緑色で表示され、内側の円は赤色で表示されます*/背景: -webkit-gradient(radial, 200 100, 10, 200 100, 100, from(red), to(green) ));
効果表示:
/* 同心円 (中心座標は 200、100)、内円の半径は 100、外円の半径は 100、内円は外円の半径より小さい、から内円の赤から外円の緑への放射状グラデーション。内側の円と外側の円の半径が等しい場合、グラデーションは無効となります*/background: -webkit-gradient(radial, 200 100, 100, 200 100, 100, from(red), to(green));
デモ効果:
/* 同心円(中心座標は200、100)、内側の円の半径は100、外側の円の半径は10、内側の円は外側の円の半径より大きい、内側からの放射状の勾配赤の円から外の円は緑、内円の半径を超えると赤、外の円は緑で表示*/
background: -webkit-gradient(radial, 200 100, 100, 200 100, 10, from(red) ), to(green));
デモ効果:
/*非同心円の場合、内側の円の中心と外側の円の中心の間の距離が2つの円の半径の差より小さい場合、上記の効果が表示されます。先細りの放射状グラデーション効果を示しています。円錐の鮮明さは、2 つの円*/背景の中心間の距離に比例します: -webkit-gradient(radial, 120 100, 10, 200 100, 100, from(red), to(green));
デモ効果:
/*同心円、内円から外円までの90%の位置、つまり外輪からの距離以内に青色のカラーマークを追加し、下の図に示すように、多層放射状グラデーション。 */background: -webkit-gradient(radial, 200 100, 10, 200 100, 100, from(red), to(green), color-stop(90%, blue));
デモ効果:
/*to() 関数のカラー値を透明に設定することで、発散円形効果をデザインできます*/background: -webkit-gradient(radial, 200 100, 10, 200 100, 90, from (red) , to(rgba(1,159,98,0)));
デモ効果:
/*to() 関数の色の値を透明に設定し、類似した色をデザインすると、球面効果をデザインできます* /background: -webkit-gradient(radial, 180 80, 10, 200 100, 90, from(#00C), to(rgba(1,159,98,0)), color-stop(98%) , #0CF));
デモ効果:
/*以下に示すように、背景画像に複数の放射状グラデーションを定義することで、複数のバブル効果をデザインできます*/background: -webkit-gradient(radial, 45 45, 10 , 52 50, 30, from(#A7D30C), to(rgba(1,159,98,0)), color-stop(90%, #019F62)), -webkit-gradient(radial, 105 105, 20, 112 120 , 50, from(#ff5f98), to(rgba(255,1,136,0)), color-stop(75%, #ff0188)), -webkit-gradient(radial, 95 15, 15, 102 20, 40, from(#00c9ff), to(rgba(0,201,255,0)), color-stop(80%, #00b5e2)), -webkit-gradient(radial, 300 110, 10, 300 100, 100, from (#f4f201) , to(rgba(228, 199,0,0)), color-stop(80%, #e4c700)); -webkit-background-origin: パディングボックス; -webkit-background-clip: content -box;
デモ効果:
グラデーション アプリケーションはグラデーション効果の境界線を定義します
コード:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Webkit引擎的渐变实现方法</title>
<style type="text/css">
div {
border-width: 20px;
width: 400px;
height: 200px;
margin: 20px;
-webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 20;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
デモ効果:
コンテンツの塗りつぶし効果を定義する
コード:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Webkit引擎的渐变实现方法</title>
<style type="text/css">
.div1 {
width:400px;
height:200px;
border:10px solid #A7D30C;
background: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00));
float:left;
}
.div1::before {
width:400px;
height:200px;
border:10px solid #019F62;
content: -webkit-gradient(radial, 200 100, 10, 200 100, 100, from(#A7D30C), to(rgba(1, 159, 98, 0)), color-stop(90%, #019F62));
display: block;
}
</style>
</head>
<body>
<div class="div1">透视框</div>
</body>
</html>
表示効果:
リストアイコンの定義
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Webkit引擎的渐变实现方法</title>
<style type="text/css">
ul {
list-style-image: -webkit-gradient(radial, center center, 4, center center, 8, from(#ff0000), to(rgba(0, 0, 0, 0)), color-stop(90%, #dd0000))
}
</style>
</head>
<body>
<ul>
<li>新闻列表项1</li>
<li>新闻列表项2</li>
<li>新闻列表项3</li>
<li>新闻列表项4</li>
</ul>
</body>
</html>
デモ効果:
その他の「CSS3 実践」ノート - グラデーション デザイン ( 1) 関連記事をご覧ください PHP 中国語 Web サイトをフォローしてください!
毎週のプラットフォームニュース：遅い接続でUXの改善、ALTテキストを書くためのヒント、HTMLロード属性のポリフィルApr 17, 2025 am 11:09 AM今週のラウンドアップ、ゆっくりとした接続の決定方法、画像のためにALTテキストに入れるもの、およびHTMLロード属性の新しいポリフィル、
少しポップを追加するための再利用可能なポップオーバーApr 17, 2025 am 11:02 AMポップオーバーは、ユーザーがコントロールボタンまたは定義された領域内でクリックすると、画面上のコンテンツの上に表示される一時的なビューです。例えば、
毎週のプラットフォームニュース：HTMLロード属性、主なARIA仕様、およびIFRAMEからShadowDOMへの移動Apr 17, 2025 am 10:55 AM今週のプラットフォームニュースのラウンドアップで、Chromeは、Web開発者のロード、アクセシビリティ仕様、およびBBCの動きのための新しい属性を導入します
GraphQlを使用したマルチプレイヤーTic Tac ToeApr 17, 2025 am 10:54 AMGraphQLは、フロントエンド開発者にとって非常に力を与えているAPIのクエリ言語です。 GraphQLサイトが説明しているように、あなたはあなたのデータを説明し、何を尋ねます
CSS変数を使用した論理操作Apr 17, 2025 am 10:44 AM非常に頻繁に、スイッチ変数（0または1のいずれかの変数を使用している間、この投稿でより詳細に説明した概念）を使用してください。
怠zyなロード埋め込みYouTubeビデオApr 17, 2025 am 10:40 AMこれは、アーサー・コレンザンを介した非常に賢いアイデアです。デフォルトのYouTube埋め込みを使用するのではなく、ユーザーが再生するかどうかをページにリソースのがらくたを追加します
CSSでカーソルを回転できますか？Apr 17, 2025 am 10:28 AMちょっと！それを行う簡単な方法や標準的な方法はありませんが、可能です。 CSSを使用して、カーソルをさまざまな内蔵ネイティブバージョンに変更できます
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
WebStorm Mac版
便利なJavaScript開発ツール
メモ帳++7.3.1
使いやすく無料のコードエディター
EditPlus 中国語クラック版
サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません
SublimeText3 中国語版
中国語版、とても使いやすい
VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター
