CSS是一種非常強大的樣式語言,它可以讓我們實現各種各樣的效果。其中,模糊效果是很常見的一種效果,可以用來營造某種藝術感或者增加頁面的視覺吸引力。那么,如何使用CSS實現模糊度為21px的效果呢?
.blur { -webkit-filter: blur(21px); filter: blur(21px); }
上面的代碼片段是實現模糊效果的關鍵代碼。其中,我們使用了CSS3新增的filter
屬性,其對應的函數blur()
可以實現指定像素值的模糊效果。在這里,我們將模糊度設置為21px,并通過-webkit-filter
來適配Webkit瀏覽器。
除了模糊度,blur()
函數還可以接受其他值作為參數,例如blur(3px)
就可以實現比較輕微的模糊效果。如果想要實現更強烈的模糊效果,就可以適當增加blur()
函數的參數值。
除了模糊效果外,filter
屬性還支持其他值,例如grayscale()
可以實現灰度效果,brightness()
可以調整圖像的亮度等等。如果想要了解更多有關filter
屬性的用法,可以參考W3C的相關文檔。