通常的,CSS中我们可以通过blur(radius)函数实现高斯模糊,blur函数也是CSS中滤镜函数使用频率较高的一个,通过高斯模糊设置可以让我们的输出图像具有更好的呈现。函数格式如下:
blur(radius)
- radius:radius一般用于设置模糊半径,值越大,模糊程度越大,当值为0的时候图像与原图保持一致。支持数据格式如:
em、rem、px、ex、ic、rlh、vh、vw、vi、vmin、vmax、vb、cm、mm、in、pc
等。
浏览器兼容性
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 的宽度 */