CSS 値 radio-gradient()_html/css_WEB-ITnose-htmlチュートリアル-php.cn

CSS 値 radio-gradient()_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

リリース： 2016-06-24 11:28:08

オリジナル

1223 人が閲覧しました

構文構造:

<radial-gradient>：radial-gradient([ <position>,]? [ [ <shape> || <size> ] | <shape-size>{2},]? <color-stop>[, <color-stop>]+);<position>：[ <length>① | <percentage>① | left | center① | right ]? [ <length>② | <percentage>② | top | center② | bottom ]?<shape>：circle | ellipse<size>：closest-side | closest-corner | farthest-side | farthest-corner | contain | cover<shape-size>：<length> | <percentage> <color-stop>：<color> [ <length> | <percentage> ]?

ログイン後にコピー

Value:

①: 放射状グラデーション円の中心の横座標値をパーセントで指定します。マイナスになることもあります。
①: 長さの値を使用して、放射状のグラデーション円の中心の横座標の値を指定します。マイナスになることもあります。
left: 左側を放射状グラデーション円の中心の横座標値に設定します。
center①: 放射状グラデーション円の中心として中央の横座標値を設定します。
right: 右側を放射状グラデーション円の中心の横座標値に設定します。
②: 放射状グラデーション円の中心の座標値をパーセントで指定します。マイナスになることもあります。
②: 長さの値を使用して、放射状グラデーション円の中心の座標値を指定します。マイナスになることもあります。
top: 上部を放射状グラデーション円の中心の縦座標値に設定します。
center②: 中央の放射状グラデーション円の中心の座標値を設定します。
bottom: 底部を放射状グラデーション円の中心の座標値に設定します。
: グラデーションの開始色と終了色を指定します。

circle: 円の放射状のグラデーションを指定します。
ellipse: 楕円の放射状のグラデーションを指定します。このドキュメントの執筆時点では、Chrome と Safari はこのパラメータ値をまだサポートしていません。

最近接側: 円の中心から円の中心に最も近い側までの放射状グラデーションの半径の長さを指定します。
最近接コーナー: 円の中心から円の中心に最も近いコーナーまでの放射状グラデーションの半径の長さを指定します。
最遠側: 円の中心から円の中心から最も遠い側までの放射状グラデーションの半径の長さを指定します。
farthest-corner: 円の中心から円の中心から最も遠い角までの放射状グラデーションの半径の長さを指定します。
contain: 円の中心から円の中心に最も近い点までの放射状グラデーションの半径の長さを指定します。最近接側と同様。
cover: カバー、円の中心から円の中心から最も遠い点までの放射状グラデーションの半径の長さを指定します。 farthest-corner

と同様、このドキュメントの執筆時点では Firefox はをサポートしていません。
<パーセント>: パーセントを使用して放射状グラデーションの水平または垂直直径の長さを指定し、水平直径と垂直直径に基づいて円か楕円かを決定します。負の値は許可されません。
: 長さの値を使用して放射状グラデーションの水平または垂直直径の長さを指定し、水平直径と垂直直径に基づいて円か楕円かを決定します。負の値は許可されません。

: 色を指定します。
: 長さの値を使用して開始位置と終了色の位置を指定することはできません。
: パーセントを使用して開始カラー位置と終了カラー位置を指定します。
ブラウザのサポート:
主要なブラウザはこの属性をサポートしています。
1. IE9 および IE9 より前のブラウザはこの属性をサポートしていません。
2. Opera 11.60 未満では、この属性はサポートされません。
3. IE 以外のブラウザは、ブラウザ互換の独自の記述方法を使用する必要があります。
コード例:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">div{  width:200px;  height:100px;  margin-top:10px;  border:1px solid #ddd;}.test{  background:-moz-radial-gradient(center center, circle, #f00, #ff0, #080);  background:-webkit-radial-gradient(center center, circle, #f00, #ff0, #080);  background:-o-radial-gradient(center center, circle, #f00, #ff0, #080);  background:-ms-radial-gradient(center center, circle, #f00, #ff0, #080);  background:radial-gradient(center center, circle, #f00, #ff0, #080);}.test2{  background:-moz-radial-gradient(circle contain, #f00, #ff0, #080);  background:-webkit-radial-gradient(circle contain, #f00, #ff0, #080);  background:-o-radial-gradient(circle contain, #f00, #ff0, #080);  background:-ms-radial-gradient(circle contain, #f00, #ff0, #080);  background:radial-gradient(circle contain, #f00, #ff0, #080);}.test3{  background:-moz-radial-gradient(left top, cover, #f00 20%, #ff0 50%, #080 80%);  background:-webkit-radial-gradient(left top, cover, #f00 20%, #ff0 50%, #080 80%);  background:-o-radial-gradient(left top, cover, #f00 20%, #ff0 50%, #080 80%);  background:-ms-radial-gradient(left top, cover, #f00 20%, #ff0 50%, #080 80%);  background:radial-gradient(left top, cover, #f00 20%, #ff0 50%, #080 80%);}.test4{  background:-moz-radial-gradient(90% 50px, closest-side, #f00, #ff0, #080);  background:-webkit-radial-gradient(90% 50px, closest-side, #f00, #ff0, #080);  background:-o-radial-gradient(90% 50px, closest-side, #f00, #ff0, #080);  background:-ms-radial-gradient(90% 50px, closest-side, #f00, #ff0, #080);  background:radial-gradient(90% 50px, closest-side, #f00, #ff0, #080);}</style></head><body><div class="test"></div><div class="test2"></div><div class="test3"></div><div class="test4"></div></body></html>

ログイン後にコピー

元のアドレス: http://www.softwhy.com/forum.php?mod=viewthread&tid=1147