CSS3 blur是CSS3中的一個新屬性,它可以使HTML元素的邊框模糊,從而使整個元素看起來更加柔和、模糊,達(dá)到一種模糊效果,其常用屬性為blur-radius。
元素選擇器 { box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); filter: blur(5px); -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); }
上述代碼表示了如何給元素添加CSS3 blur屬性的方法,其中blur-radius表示模糊半徑,值越大,模糊效果越明顯,取值可以為像素值或百分比值。上述代碼還使用了一些廠商前綴以保證代碼跨瀏覽器兼容。
需要注意的是,CSS3 blur屬性可能會影響頁面的性能,因為它需要大量計算和渲染,所以使用時需慎重。
上一篇css3 div 書本