円形グラデーションは、ボックスの中心から外へ広がる
グラデーションで、値は「radial-gradient」で表します。
書き方は以下のように書きます。
background:radial-gradient(contain, #ff5555, #00FF00, #ffffff);
・一番左のcontainの箇所にはサイズを書きます。
分かりづらいのでサンプルコードをご覧ください。
ちなみにこの位置に、開始位置・角度・形状も設定できます。
・左から2番目の#ff5555はグラデーションの開始色
・左から3番目の#00FF00はグラデーションの途中色
・左から4番目の#ffffffはグラデーションの終了色
| 値 | 説明 |
| 開始位置 | left,center,right,top,bottomなどのキーワード、%,pxの数値 |
| 角度 | degなどの単位を付けた数値 |
| 形状 | eclipse(楕円),circle(正円)、デフォルト値はeclipse |
| サイズ | closet-side,contain,farthest-side closest-corner,farthest-cornder,cover(指定範囲に合わせる。デフォルト値) |
| 開始色 | 開始位置の色。カラーコードやキーワード |
| 途中色 | 途中色。複数指定可能 |
| 終了色 | グラデーションが終了するときの色 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
*{margin:0;padding:0;} #container{ width:640px; height:400px; background-color:#f0f0f0; margin:0 auto; } .box{ margin:8px; width:180px; height:120px; } .sample1{ /* Chrome */ background:-webkit-radial-gradient(ellipse,#ff0000, #00ff00, #0000ff); /* Firefox */ background:-moz-radial-gradient(ellipse,#ff0000, #00ff00, #0000ff); /* Opera */ background:-o-radial-gradient(ellipse,#ff0000, #00ff00, #0000ff); /* InternetExplore */ background:-ms-radial-gradient(ellipse,#ff0000, #00ff00, #0000ff); } .sample2{ /* Chrome */ background:-webkit-radial-gradient(farthest-side,#ff0000, #00ff00, #0000ff); /* Firefox */ background:-moz-radial-gradient(farthest-side,#ff0000, #00ff00, #0000ff); /* Opera */ background:-o-radial-gradient(farthest-side,#ff0000, #00ff00, #0000ff); /* InternetExplore */ background:-ms-radial-gradient(farthest-side,#ff0000, #00ff00, #0000ff); } .sample3{ /* Chrome */ background:-webkit-radial-gradient(closest-corner,#ff0000, #00ff00, #0000ff); /* Firefox */ background:-moz-radial-gradient(closest-corner,#ff0000, #00ff00, #0000ff); /* Opera */ background:-o-radial-gradient(closest-corner,#ff0000, #00ff00, #0000ff); /* InternetExplore */ background:-ms-radial-gradient(closest-corner,#ff0000, #00ff00, #0000ff); } .sample4{ /* Chrome */ background:-webkit-radial-gradient(left,#ff0000, #00ff00, #ffffff); /* Firefox */ background:-moz-radial-gradient(left,#ff0000, #00ff00, #ffffff); /* Opera */ background:-o-radial-gradient(left,#ff0000, #00ff00, #ffffff); /* InternetExplore */ background:-ms-radial-gradient(left,#ff0000, #00ff00, #ffffff); } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>HTMLのメモ</title> <link rel="stylesheet" href="test.css"> </head> <body> <div class="box sample1"></div> <div class="box sample2"></div> <div class="box sample3"></div> <div class="box sample4"></div> </body> </html> |