CSS3 是目前最新的 CSS 標準版本,其中包含了許多令人興奮的新特性。其中之一就是模糊度(blur)。
/* 使用模糊度 */ .box { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); filter: blur(5px); }
模糊度可以用來創建特殊效果。通過將模糊度應用于一個元素,可以讓該元素和其背景看起來更加柔和和美觀。毛玻璃效果(frosted glass effect)就是最常見的一種利用模糊度來實現的效果。
/* 毛玻璃效果 */ .box { background-image: url(bg.jpg); background-size: cover; position: relative; } .box:after { content: ""; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: rgba(255, 255, 255, 0.4); backdrop-filter: blur(10px); z-index: -1; }
在上面的代碼中,我們使用了backdrop-filter
屬性,該屬性會將模糊度應用于元素的背景。這樣一來,我們就可以獲得毛玻璃效果了。
需要注意的是,由于模糊度的應用會導致頁面的重繪和重排,因此需要謹慎使用。在實際開發中,我們應該盡量減少對模糊度的應用,以避免對頁面性能的影響。