JavaScript，html5：如何動態創建Vignette效果？

Question

所以我需要的是簡單的：用戶按下東西，用戶看到的暈影效果上新的div上的所有頁面（頁面大小）都

的頂部是否有可能與某些HTML5畫布的藝術？以及如何做這樣的事情？

Answer 1

那麼，這是正是 Chrome的設置頁面是如何做的：http://jsfiddle.net/JRGHM/

.overlay { 
    -webkit-box-align: center; 
    -webkit-box-pack: center; 
    -webkit-transition: 0.25s opacity; 
    background: -webkit-radial-gradient(rgba(127, 127, 127, 0.5), 
             rgba(127, 127, 127, 0.5) 35%, 
             rgba(0, 0, 0, 0.7)); 
    bottom: 0; 
    display: -webkit-box; 
    left: 0; 
    padding: 20px; 
    padding-bottom: 130px; 
    position: fixed; 
    right: 0; 
    top: 0; 
    z-index: 10; 
} 

正如你所看到的，重要的部分是梯度。

您可以在加入適當的梯度語法支持CSS3漸變所有的瀏覽器的代碼工作：http://caniuse.com/#feat=css-gradients