「CSS3実戦」メモ～グラデーションデザイン(1)_体験交流

画像グラデーションと比較した場合、css ベースのグラデーションの最大の利点は、変更が簡単で、無段階のスケーリングをサポートしているため、トランジションがより自然になることです。現在、css グラデーションを実装できるのは、webkit および gecko エンジンをベースにしたブラウザのみです。presto エンジンをベースとした opera ブラウザは、当分の間、グラデーションをサポートしていません。trident ベースの ie は、フィルタを通じてグラデーションを実現できますが、推奨されません。

webkit エンジン用の css グラデーション デザイン (safari 4 以降)

基本的な構文:

-webkit-gradient(<type>,<point>[,<radius>]?,<point>[,<radius>]?[,<stop>]*)

パラメータの説明:

<type>: 線形グラデーション (linear) や放射状グラデーション (radial) などのグラデーション タイプを定義します。

<point>: グラデーションの開始点と終了点の座標、つまり、グラデーションの適用が開始される x 軸と y 軸の座標、およびグラデーションが終了する座標を定義します。このパラメータは、数値、パーセンテージ、および (0, 0) または (left, top) などのキーワードをサポートします。キーワードには、上、下、左、右が含まれます。

<radius>: 放射状グラデーションを定義する場合、放射状グラデーションの長さを設定するために使用されます。このパラメータは数値です。

<stop>: グラデーションの色とステップ サイズを定義します。これには、from (カラー値) 関数を使用して定義された開始カラー、to (カラー値) 関数を使用して定義された終了カラー、color-stop (値、カラー値) 関数を使用して定義されたカラー ステップの 3 種類の値が含まれます。 ）。 color-stop() には 2 つのパラメータ値が含まれています。最初のパラメータ値は数値またはパーセント値で、値の範囲は 0 ～ 1.0 (または 0% ～ 100%) で、2 番目のパラメータ値は任意の色の値を表します。

線形グラデーションの基本的な使用法:

<strong><code class=" hljs lasso">/*简单的线性渐变背景色，从顶部到底部，从蓝色向红色渐变显示*/
</code></strong><code class=" hljs lasso">background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red));</code>

デモ効果:

<strong><code class=" hljs lasso">/*从顶部到中间，再从中间到底部，从蓝色到绿色，再到红色渐变显示*/
</code></strong><code class=" hljs lasso">background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red), color-stop(50%, green));</code>

デモ効果:

<strong><code class=" hljs lasso">/*设计二重渐变，从顶部到底部，先是从蓝色到白色渐变显示，再从黑色到红色渐变显示*/
</code></strong><code class=" hljs lasso">background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red),color-stop(0.5, #fff), color-stop(0.5, #000));</code>

デモ効果:

<strong><code class=" hljs lasso">/*通过设置不同的步长值，从而设计多重渐变效果，从顶部到底部，先是从蓝色到白色渐变，再从百色到黑色渐变，最后是从黑色到红色渐变显示*/
</code></strong><code class=" hljs lasso">background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red),color-stop(0.4, #fff), color-stop(0.6, #000));</code>

デモ効果:

概要: color-stop() 関数には 2 つのパラメータ値が含まれています。最初のパラメータ値はコーナー マークの位置を指定し、2 番目のパラメータ値はカラー マークの色を指定します。グラデーションには複数のカラー ストップを含めることができます。位置の値は 0 ～ 1 の間の小数、または 0 ～ 100% のパーセンテージで、カラー ストップの位置比率を指定します。

放射状グラデーションの基本的な使用法

<strong><code class=" hljs lasso">/*同心圆（圆心坐标为200，100），内圆半径为10，外圆半径为100，内圆小于外圆半径，从内圆红色到外圆绿色径向渐变，超过外圆半径显示为绿色，内圆显示红色*/</code></strong><code class=" hljs lasso">
background: -webkit-gradient(radial, 200 100, 10, 200 100, 100, from(red), to(green));</code>

エフェクト表示:

<strong><code class=" hljs lasso">/*同心圆（圆心坐标为200，100），内圆半径为100，外圆半径为100，内圆小于外圆半径，从内圆红色到外圆绿色径向渐变。当内圆和外圆半径相等时，则渐变无效*/
</code></strong><code class=" hljs lasso">background: -webkit-gradient(radial, 200 100, 100, 200 100, 100, from(red), to(green));</code>

デモ効果:

<strong><code class=" hljs lasso">/*同心圆（圆心坐标为200，100），内圆半径为100，外圆半径为10，内圆大于外圆半径，从内圆红色到外圆绿色径向渐变，超出内圆半径显示为红色，外圆显示绿色*</code></strong><code class=" hljs lasso">/
background: -webkit-gradient(radial, 200 100, 100, 200 100, 10, from(red), to(green));</code>

デモンストレーション効果:

<strong><code class=" hljs lasso">/*非同心圆，内圆圆心和外圆圆心的距离小于两圆半径的差，则显示上图效果，呈现锥形径向渐变效果。锥形的尖锐性与两圆圆心距离成正比*/
</code></strong><code class=" hljs lasso">background: -webkit-gradient(radial, 120 100, 10, 200 100, 100, from(red), to(green));</code>

デモ効果:

<strong><code class=" hljs lasso">/*同心圆，在内圆到外圆中间90%的位置，即距离外环内添加一个蓝色色标，设计多层径向渐变，如下图所示。*/
</code></strong><code class=" hljs lasso">background: -webkit-gradient(radial, 200 100, 10, 200 100, 100, from(red), to(green), color-stop(90%, blue));</code>

デモ効果:

<strong><code class=" hljs lasso">/*通过设置to()函数的颜色值为透明，可以设计发散的圆形效果*/
</code></strong><code class=" hljs lasso">background: -webkit-gradient(radial, 200 100, 10, 200 100, 90, from(red), to(rgba(1,159,98,0)));</code>

デモ効果:

<strong><code class=" hljs lasso">/*通过设置to（）函数的颜色值为透明，同时设计相似色，可以设计球形效果*/
</code></strong><code class=" hljs lasso">background: -webkit-gradient(radial, 180 80, 10, 200 100, 90, from(#00c), to(rgba(1,159,98,0)), color-stop(98%, #0cf));</code>

デモ効果:

<strong><code class=" hljs lasso">/*通过为背景图定义多个径向渐变，可以设计多个气泡效果，如下图所示*/
</code></strong><code class=" hljs lasso">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: padding-box; -webkit-background-clip: content-box;</code>

デモ効果:

グラデーション アプリケーショングラデーション効果の境界線を定義します

コード:

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

デモ効果:

関連ラベル：

css

ソース：php.cn

前の記事：CSSを使用してすべてのブラウザと互換性のある三角形を作成する方法 次の記事：親divの高さが子divの高さに適応できない問題の解決策_CSS/HTML

このウェブサイトの声明

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

著者別の最新記事

• NullPointerException とは何ですか?どのように修正すればよいですか?
  2024-10-22 09:46:29
• 初心者からプログラマーへ: 旅は C の基礎から始まります
  2024-10-13 13:53:41
• PHP による Web 開発のロックを解除する: 初心者ガイド
  2024-10-12 12:15:51
• C の謎を解く: 新人プログラマーのための明確でシンプルな道
  2024-10-11 22:47:31
• コーディングの可能性を解き放つ: まったくの初心者のための C プログラミング
  2024-10-11 19:36:51
• 内なるプログラマーを解き放つ: まったくの初心者のための C
  2024-10-11 15:50:41
• C で生活を自動化する: 初心者向けのスクリプトとツール
  2024-10-11 15:07:41
• PHP を簡単に: Web 開発の最初のステップ
  2024-10-11 14:21:21
• Python で何でも構築: 創造性を解き放つための初心者ガイド
  2024-10-11 12:59:11
• コーディングの鍵: 初心者のための Python の力を解き放つ
  2024-10-11 12:17:31

最新の問題

CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア

から 2024-04-16 10:10:18

0

0

1335

ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...

から 2024-04-06 21:58:04

0

1

800

Javafx でインライン CSS スタイルを動的に変更する アプリケーションが最大化されているときにペインの背景画像を変更しようとしています。私の背景はインライン CSS を使用して設定されています。スタイル用に 2 つの異なる変数と if...

から 2024-04-06 20:57:16

0

1

487

CSS でフローティング要素を水平ではなく垂直にスタックするにはどうすればよいですか? 片側にメインコンテンツ、もう一方に追加コンテンツがある 2 つの列を持つ Web ページを作成しようとしています。ただし、float プロパティを使用して追加の列を左に揃えているた...

から 2024-04-06 20:45:26

0

2

386

他の CSS コードに関係なく、フレックスボックス内のテキストを強制的に垂直方向の中央に配置する方法はありますか? 開発中の Web サイトで使用されている大規模な CSS コードの一部である次の CSS コードがあります。 }.card-u{margin:20px;padding:20px;w...

から 2024-04-06 20:41:51

0

1

518

関連トピック

詳細>

• css
• CSS中心
• CSSに画像を挿入する方法
• CSSが表示を超えています...
• CSSフォントの色
• CSSとは何ですか
• CSSで三角形を書く方法
• CSSで文字の色を設定する