ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS 値 radio-gradient()_html/css_WEB-ITnose
CSS 値 radio-gradient()_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:28:081202ブラウズ
構文構造:
<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:
7f952ef31037694d232de8bb3c23c71d
42c97a047d75abc12b9b351eb8562711①: 放射状グラデーション円の中心の横座標値をパーセントで指定します。マイナスになることもあります。
d82af2074b26fcfe177e947839b5d381①: 長さの値を使用して、放射状のグラデーション円の中心の横座標の値を指定します。マイナスになることもあります。
left: 左側を放射状グラデーション円の中心の横座標値に設定します。
center①: 放射状グラデーション円の中心として中央の横座標値を設定します。
right: 右側を放射状グラデーション円の中心の横座標値に設定します。
42c97a047d75abc12b9b351eb8562711②: 放射状グラデーション円の中心の座標値をパーセントで指定します。マイナスになることもあります。
d82af2074b26fcfe177e947839b5d381②: 長さの値を使用して、放射状グラデーション円の中心の座標値を指定します。マイナスになることもあります。
top: 上部を放射状グラデーション円の中心の縦座標値に設定します。
center②: 中央の放射状グラデーション円の中心の座標値を設定します。
bottom: 底部を放射状グラデーション円の中心の座標値に設定します。
9abf9243314f6d1cd71ac1087d19db3b: グラデーションの開始色と終了色を指定します。
18b1d935585fae6b48e00ea5f5b48e2d
circle: 円の放射状のグラデーションを指定します。
ellipse: 楕円の放射状のグラデーションを指定します。このドキュメントの執筆時点では、Chrome と Safari はこのパラメータ値をまだサポートしていません。
971f671fe497569bdb0616a45a44dc0f
最近接側: 円の中心から円の中心に最も近い側までの放射状グラデーションの半径の長さを指定します。
最近接コーナー: 円の中心から円の中心に最も近いコーナーまでの放射状グラデーションの半径の長さを指定します。
最遠側: 円の中心から円の中心から最も遠い側までの放射状グラデーションの半径の長さを指定します。
farthest-corner: 円の中心から円の中心から最も遠い角までの放射状グラデーションの半径の長さを指定します。
contain: 円の中心から円の中心に最も近い点までの放射状グラデーションの半径の長さを指定します。最近接側と同様。
cover: カバー、円の中心から円の中心から最も遠い点までの放射状グラデーションの半径の長さを指定します。 farthest-corner
b35e4c04c164dcca6f009259a927905b
と同様、このドキュメントの執筆時点では Firefox は b35e4c04c164dcca6f009259a927905b をサポートしていません。
f78113d1a82a15cadbe8fa962dc306cf: パーセントを使用して放射状グラデーションの水平または垂直直径の長さを指定し、水平直径と垂直直径に基づいて円か楕円かを決定します。負の値は許可されません。
d82af2074b26fcfe177e947839b5d381: 長さの値を使用して放射状グラデーションの水平または垂直直径の長さを指定し、水平直径と垂直直径に基づいて円か楕円かを決定します。負の値は許可されません。
9abf9243314f6d1cd71ac1087d19db3b
b10fb37415d019cfffa8c4d7366c607f: 色を指定します。
d82af2074b26fcfe177e947839b5d381: 長さの値を使用して開始位置と終了色の位置を指定することはできません。
42c97a047d75abc12b9b351eb8562711: パーセントを使用して開始カラー位置と終了カラー位置を指定します。
ブラウザのサポート:
主要なブラウザはこの属性をサポートしています。
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