CSS通过blur实现高斯模糊

通常的,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 的宽度 */
        

猜你喜欢

转载自blog.csdn.net/chf1142152101/article/details/128249545