css - 影付き円 CSS 3

Question

私の Web ページには がbackground: grayあり、写真に示すような白い影の円を追加する必要があります。私の決定の 1 つは追加することurl:('../img/background.png') no-repeat grayですが、画像に垂直方向のグラデーションがあったため、色を接続できません。

CSS 3 を使用してこれを行うことは可能だと思いますよね?

Answer 1

それが放射状グラデーションです。

body {
  width: 600px;
  height: 300px;
  background-image: -o-radial-gradient(circle, #fff, #b1b5be 150px);
  background-image: -moz-radial-gradient(circle, #fff, #b1b5be 150px);
  background-image: -webkit-radial-gradient(circle, #fff, #b1b5be 150px);
  background-repeat: no-repeat;
}

ライブデモ:ティンカービン

Answer 2

cssフィルターを介して白い円の画像でdivをぼかして、白い円の影を作成することもできます。

ウェブキット: -webkit-filter: blur(15px);

いいえ:filter: blur(Add=1, Direction=1, Strength=15)

Firefox で CSS を介して SVG フィルターを使用する