CSS3 滤镜 filter CSS3 calc 函数

最新推荐文章于 2024-06-16 13:16:08 发布

Cassie燁

最新推荐文章于 2024-06-16 13:16:08 发布

阅读量139

点赞数

文章标签：前端 html javascript

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

版权

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>