CSS之filter属性和calc函数

最新推荐文章于 2023-03-03 13:52:31 发布

小航哥sir

最新推荐文章于 2023-03-03 13:52:31 发布

阅读量333

点赞数

分类专栏： css 文章标签： css3 css html 前端

本文链接：https://blog.csdn.net/hangshao_123/article/details/122484883

版权

css 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

1. 有哪些属性值和作用

·blur

作用：设置模糊度

      .box1 {
        width: 200px;
        height: 200px;
        background-color: pink;
        /* 1. blur属性值测试 */
        filter: blur(10px);
      }

·opacity

设置透明度【直接写opacity 更简单是不是】

·grayscale

图片变灰色

      .box2 {
        position: absolute;
        top: 200px;
        height: 200px;
        width: 200px;
        height: 200px;
        background-color: pink;
        /* 2. opacity属性测试 0-1之间取值*/
        filter: opacity(0.5);
      }
      .box3 {
        width: 200px;
        height: 200px;
        background-color: pink;
        /* 3. grayscale属性测试 grayscale 0-1之间 */
        filter: grayscale(0.5);
      }

    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3">123</div>

更多属性，参考文章：

2. calc函数

·是一个函数，能够对width、height、padding、margin设置长度。相对于父级进行长度设置。

·比如子级宽度设置为calc(100% - 10px),意味子级的宽度是父级的宽度 - 10px，父级宽度发生改变，子级也会发生改变，这个是重点。

·此外，如果是padding margin的值，使用calc函数，都会以父元素的宽度作为参照。

·最后里面的计算如果是加法或者减法，符号两边必须加空格。乘法和除法没关系。

参考文章：

css calc函数用法_CSS3 calc（）函数简介_cune1359的博客-CSDN博客

HTML

    <div class="box1">
      <div class="box2">345</div>
      <div class="box2">345</div>
      <div class="box2">345</div>
      <div class="box2">345</div>
      <div class="box2">345</div>
    </div>
    <div class="box1">
      <div class="box2">345</div>
      <div class="box2">345</div>
      <div class="box2">345</div>
      <div class="box2">345</div>
      <div class="box2">345</div>
    </div>

CSS

      .box1 {
        width: 260px;
        height: 300px;
        background-color: pink;
        margin-bottom: 10px;
        padding-left: 10px;
      }
      .box2 {
        width: calc(100% / 5);
        height: calc(100% / 5 - 10px);
        background-color: red;
        margin-left: calc(100% - 1px);
        padding-left: calc(100% - 20px);
      }

结尾：

学习id： 201903090124-48

现在是大三学生，学习到了vue阶段，如有不对的地方，欢迎指正，一起努力呀。如有转载请注明出处

如果要转载，请通知俺，并声明出处。