2

CSS3 ( ) を使用せずに円の放射状グラデーションを作成するにはどうすればよいです-webkit-radial-gradientか? だから私は円を持っているとしましょう：

#circle {
    height: 200px;
    width: 200px;
    border-radius: 50%;
}

この円の放射状グラデーションをどのように描画しますか?

編集:外部ライブラリなしでこれを行いたいと思います。また、カラーストップに基づいてグラデーションを作成しています。例: (0,255)。

4

2 に答える 2

2

使用できる方法がいくつかあります。

  1. 放射状グラデーションを使用して svg ファイルを作成し、それを背景として設定できます。background-image: url()
  2. グラデーションのpngまたはjpgを作成し、上記と同じ方法で設定できます

外部ファイルを使用したくない場合は、base64 でエンコードしてdata urlを使用できます。

を使用background-size: containして、グラデーションを円 (または楕円) のサイズに合わせることができますが、ピクセル化されないように十分に高い解像度のグラデーションを作成してください。

編集：ここにフィドルがあるので、実際に見ることができます。データ URL はエンコードされているため、svg ファイルのソースは次のとおりです。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="512px" height="512px" viewBox="-256 -256 512 512"
  xmlns="http://www.w3.org/2000/svg" version="1.1" >
<defs>
  <radialGradient id="grad" cx="50%" cy="50%" r="50%">
    <stop stop-color="white" offset="0%"/>
    <stop stop-color="black" offset="100%"/>
  </radialGradient>
</defs>
<circle r="256px" fill="url(#grad)" />
</svg>

カラー ストップを変更してから、このツールを使用してデータ URI を再エンコードできます

于 2012-12-20T00:13:50.090 に答える
0

現在のところ、放射状グラデーションの標準化された、または広くサポートされている構文はありません。

CSS でこれを行う最善の方法は、CSS ジェネレーター ( http://westciv.com/tools/radialgradients/またはhttp://www.colorzilla.com/gradient-editor/など) を使用することです。これらのサイトは、さまざまなブラウザーごとに構文を作成して処理します。LESS または SASS を使用している場合は、ミックスインを使用してバリエーションを処理することも検討できます。

ブラウザー固有の CSS を使用できない場合、最適なオプションは背景画像 (PNG または SVG ファイル) を作成することです。

于 2012-12-20T00:57:51.287 に答える