Usually, in CSS, we can use the blur (radius) function to achieve Gaussian blur. The blur function is also a frequently used filter function in CSS. Through the Gaussian blur setting, our output image can have a better presentation. The function format is as follows:
blur(radius)- radius: radius is generally used to set the blur radius. The larger the value, the greater the blur. When the value is 0, the image is consistent with the original image. Support data formats such as:
em、rem、px、ex、ic、rlh、vh、vw、vi、vmin、vmax、vb、cm、mm、in、pcetc.
browser compatibility
The blur function is supported by all major browsers.
example
Let's take an example to see the effect of setting Gaussian blur.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>通过blur设置图片高斯模糊</title>
<style>
* {
box-sizing: border-box;
}
body {
min-height: 100vh;
display: grid;
/* 1ch 等于一个 0 的宽度 */