CSS blur() 函數

定義和用法

CSS 的 blur() 濾鏡函數為元素應用模糊效果。值越大，模糊效果越強。

如果未指定值，則默認使用 0。

為 <h1> 和 <img> 元素應用不同的模糊效果：

h1 {
  filter: blur(2px);
}
#img1 {
  filter: blur(2px);
}
#img2 {
  filter: blur(6px);
}

創建模糊背景：

img.background {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
  filter: blur(35px);
}

blur(radius)

值	描述
radius	可選。指定模糊的半徑。值越大，模糊效果越強。如果未指定值，則默認使用 0（無效果）。

值

描述

radius

可選。指定模糊的半徑。值越大，模糊效果越強。

如果未指定值，則默認使用 0（無效果）。

版本：	CSS Filter Effects Module Level 1

表格中的數字表示首個完全支持該函數的瀏覽器版本。

Chrome	Edge	Firefox	Safari	Opera
18	12	35	6	15