CSS 放射状グラデーションについての深い理解radial-gradient_html/css_WEB-ITnose

× 内容 [1] 定義 [2] 楕円の中心 [3] 楕円の種類 [4] 楕円のサイズ [5] カラースケール [6] グラデーションの繰り返し [7] その他

前の単語

前回の記事でリニアを紹介しましたグラデーション、この記事では放射状グラデーションの内容を紹介します

定義

放射状グラデーションは実際には楕円形のグラデーションであり、円は単なる特別な楕円です。放射状グラデーションは、円の中心点から外側に向かって楕円形に広がります。グラデーションの実装は、楕円とカラー スケールの 2 つの部分で構成されます。楕円形の部分は、放射状のグラデーションの位置、サイズ、形状を制御するために使用されます。カラー スケール パーツには、グラデーションの色の変化を制御するために使用される色の値と位置が含まれています。

[注意] safari4-5、IOS3.2-4.3、android2.1-3 は線形グラデーションのみをサポートしており、safari5.1-6、IOS5.1-6.1、android4-4.3 は線形グラデーションをサポートする必要があります。 gradients 放射状グラデーション、および -webkit- を追加する必要があります。IE10+ およびその他の上位バージョンのブラウザーは標準の書き込みをサポートします

//标准写法radial-gradient([[<shape>||<size>]?[at <position>,]?<color-stop>[,<color-stop>]+)//-webkit-老版本径向渐变的写法-webkit-radial-gradient([<position>||<angle>,]? [<shape>||<size>,]>?<color-stop>[,<color-stop>]+)

ellipse

放射状グラデーション メソッドは主に 7f952ef31037694d232de8bb3c23c71d、18b1d935585fae6b48e00ea5f5b48e2d、971f671fe497569bdb0616a45a44dc0fで構成されます; これら 3 つのパラメータは、それぞれ楕円の中心、形状、サイズに影響します。

position

グラデーションの円の中心を定義します、デフォルトはcenter center

<position>: x轴 y轴

x轴:<length> | <percentage> | left | center | righty轴:<length> | <percentage> | top | center | bottom

[注意] Linear gradientと同様に、古いバージョンの-webkit-kernelブラウザはサポートしていませんat 7f952ef31037694d232de8bb3c23c71d の記述は、7f952ef31037694d232de8bb3c23c71d の記述方法のみをサポートします

【1】キーワード

【2】値

x軸の値は0点からのオフセットを表します(上側)グラデーションボックスの左隅) on the x-axis; y 軸の値は y 軸の 0 点からのオフセットを表します

【3】パーセント

x 軸のパーセンテージは、グラデーション ボックスの幅、Y 軸のパーセンテージはグラデーション ボックスの高さに対する相対値です。グラデーションボックスの幅と高さはbackground-sizeで決まります

【4】単一値

値が1つしかない場合、デフォルトの2番目の値はcenter

shape

その形状グラデーションが円または楕円であることを定義します。デフォルトは楕円です

rrree

size

グラデーションのサイズを定義します。デフォルトは最遠角です

【1】キーワード

x轴    left: 0% center: 50% right: 100%y轴    top: 0% center: 50% bottom: 100%

<shape>: circle | ellipse

//左上が最も近い角、右上が最も遠い角、右下が最も近い辺です。一番遠いところ

【2】圆

　　如果18b1d935585fae6b48e00ea5f5b48e2d是circle，则971f671fe497569bdb0616a45a44dc0f可以设置为d82af2074b26fcfe177e947839b5d381，表示直径，0%表示圆心，100%表示距离圆心为半径的点

　　[注意]不能为负值也不可以设置百分比

　　[注意]webkit内核浏览器支持使用CSS设置圆的d82af2074b26fcfe177e947839b5d381型的971f671fe497569bdb0616a45a44dc0f，但并不支持javascript改变其值；对于safari浏览器来说，只有半径写在circle关键字前面才识别

//以下DEMO只有IE10+及firefox可以正常运行

【3】椭圆

　　如果18b1d935585fae6b48e00ea5f5b48e2d是ellipse或不设置时，则971f671fe497569bdb0616a45a44dc0f可以设置为d82af2074b26fcfe177e947839b5d381或42c97a047d75abc12b9b351eb8562711，第一个值表示水平直径，第二个值表示垂直直径。百分比相对于径向渐变容器的尺寸

　　[注意]若只有一个值，则表示水平和垂直直径相同，因为圆是特殊的椭圆，所以一个值时不可以为百分比

　　[注意]和圆类似，971f671fe497569bdb0616a45a44dc0f值不能为负值，因为其表示的是直径

　　[重要]由于webkit浏览器在使用circle或ellipse关键字时渲染不正常，所以若使用circle时，可以不写shape(默认为ellipse)，用水平和垂直直径相同的椭圆替代

 

色标

　　与线性渐变的色标相同的部分不再重复，这里只说明不同的部分。由于位置处于100%的色标有时并不会占满渐变区域，则浏览器会默认使用最后一个色标的颜色铺满渐变区域

<color-stop> = <color> [ <percentage> | <length> ]?

 

重复渐变

　　重复渐变可以实现径向渐变的重复效果，使色标在椭圆方向上无限重复，实现一些特殊的效果

　　[注意]只有当首尾两颜色位置不在0%或100%时，重复渐变才生效

background-image: -webkit-repeating-radial-gradient(blue 20%,green 50%);background-image: repeating-radial-gradient(blue 20%,green 50%);

 

其他

　　关于线性渐变的多背景和应用场景，径向渐变与之类似。但径向渐变无法实现IE兼容。