CSS3 滤镜 filter CSS3 calc 函数_在css中怎么使用filter属性配合calc计算属性过滤颜色-CSDN博客

本文链接：https://blog.csdn.net/MOUNTAIN_SEA1/article/details/126292887

本文介绍CSS3中两种实用的功能：滤镜(filter)属性用于实现图片模糊等视觉效果，通过调整数值即可改变效果强度；calc函数则允许在CSS中进行简单的数学运算，灵活设置元素尺寸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS3 滤镜 filter :

filter CSS 属性将模糊或颜色偏移等图形效果应用于元素

filter: 函数(); 例如 filter: blur(5px) blur 模糊处理数值越大越模糊

    <title>图片模糊处理filter</title>
    <style>
        img {
            /* blur是一个函数 小括号里面数值越大 图片越模糊 注意数值要加 px 单位 */
            filter: blur(5px);
        }
        /* 鼠标一经过  图片不模糊 */
        img:hover {
            filter: blur(0);
        }
    </style>
</head>
<body>
    <img src="tudou.jpg" alt="">
</body>

CSS3 calc 函数：

calc() 此CSS函数让你在声明 CSS属性值时执行一些计算

width: calc(100% - 80px)

括号里面可以使用 + - * / 来进行计算

    <title>CSS3宽度calc函数</title>
    <style>
        .father {
            /* width: 300px; */
            /* width: calc(150px + 30px); */
            width: 300px;
            height: 200px;
            background-color: pink;
        }
        .son {
            /* width: 150px; */
            /* width: calc(150px + 30px); */
            width: calc(100% - 30px);
            height: 30px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <!-- 需求 我们的子盒子宽度永远比 父盒子 小30像素 -->
    <div class="father">
        <div class="son"></div>
    </div>
</body>