帶有陰影CSS的圓3

Question

在我的網頁上我有background: gray，現在我需要添加一個白色陰影圓圈，如圖中所示。我的一個決定是添加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; 
} 

現場演示：Tinkerbin

Answer 2

您也可以通過CSS濾鏡模糊的白色圓圈圖像格創建白色圓形陰影。

的Webkit： -webkit-filter: blur(15px);

IE：filter: blur(Add=1, Direction=1, Strength=15)

在Firefox中使用SVG濾鏡通過CSS