放射状の勾配半径を作成する200px

Question

幅と高さの半径を200pxにするにはどうすればよいですか？私はピクセル単位で行うことができますが、すべての試みが失敗したことを読んだことがあります。

background-image: -webkit-radial-gradient(75% 100%, circle farthest-corner, #ffffff, #ff7ae9 33%); 
background-image: -o-radial-gradient(75% 19%, circle farthest-corner, #ffffff, #ff7ae9 33%); 
background-image: -ms-radial-gradient(75% 19%, circle farthest-corner, #ffffff, #ff7ae9 33%); 
background-image: radial-gradient(75% 19%, circle farthest-corner, #ffffff, #ff7ae9 33%) 
background-image: -moz-radial-gradient(75% 19%, circle farthest-corner, #ffffff, #ff7ae9 33%); 

Answer 1

編集：のような任意の標準的なCSSユニット、「200pxの」は円の大きさである。この例では

---

background-image: -moz-radial-gradient(50px 100px, circle farthest-corner, #ffffff, #ff7ae9 200px); 
background-image: -webkit-radial-gradient(50px 100px, circle farthest-corner, #ffffff, #ff7ae9 200px); 
background-image:  -o-radial-gradient(50px 100px, circle farthest-corner, #ffffff, #ff7ae9 200px); 
background-image:  -ms-radial-gradient(50px 100px, circle farthest-corner, #ffffff, #ff7ae9 200px); 
background-image:   radial-gradient(50px 100px, circle farthest-corner, #ffffff, #ff7ae9 200px); 

それをより明確にするために、すべてのベンダープレフィックスを追加px、emまたはパーセンテージは問題ありません。

「50px 100px」は円の中心の位置です。background-positionと同じように動作し、「左上」のような値も問題ありません。

ベンダー固有の接頭辞をすべて手助けできるonline generatorsがいくつかあります。

---

p.s.
@Mohsenピクセル値は大丈夫です、MDNは言う：

軸0％と100％以上の勾配に沿った長さとの割合のいずれかあなたが 'length' をクリックした場合には、

を語ります

長さのCSS構文は、数字の直後に1つの単位が続きます。番号とユニットの間のスペースは使用できません。