CSS3基础之filter、calc函数、transition过渡

最新推荐文章于 2024-04-15 04:48:46 发布

格子学前端

最新推荐文章于 2024-04-15 04:48:46 发布

阅读量834

点赞数 26

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

本文链接：https://blog.csdn.net/m0_61794291/article/details/123592341

版权

前端同时被 3 个专栏收录

43 篇文章 5 订阅

订阅专栏

html

31 篇文章 1 订阅

订阅专栏

css

17 篇文章 1 订阅

订阅专栏

文章目录

1.CSS3盒子模型
- - 1. 1 content-box
  - 1. 2 border-box
2.滤镜filter
3.calc函数
4.transition过渡

1.CSS3盒子模型

CSS3 有两种不同的盒模型，可以分别通过设置box-sizing的content-box或border-box这两个属性来得到

1. 1 content-box

<style>
    div {
        box-sizing: content-box;
    }
</style>

content-box是原CSS的默认盒子模型，盒子大小为 width + padding + border，也就是 宽度+内边距+边框

1. 2 border-box

<style>
    div {
        box-sizing: border-box;
    }
</style>

border-box是CSS3中新添加的一种盒子模型，盒子大小就是宽度，不包括内边距和边框
设置border-box属性的盒子，它的 padding和border不会撑大盒子

2.滤镜filter

filter: 将模糊或颜色偏移等图形效果应用于元素(图片变模糊)

<style>
    img {
        filter: blur(10px);
    }
</style>

 - List item

在这里插入图片描述

blur:数值越大，越模糊

3.calc函数

calc函数可以让你在声明CSS属性值时执行一些计算

<style>
    .father {
        width: 300px;
        height: 300px;
        background-color: lightblue;
    }
    .son {
        width: calc(100%-50px);
        /* 子盒子宽度=父盒子宽度*100%-50px */
        height: 200px;
        background-color: lightgreen;
    }
</style>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

在这里插入图片描述

4.transition过渡

过渡（transition) 是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果

<style>
    div {
        transition: 要过渡的属性 花费时间 运动曲线 何时开始;
    }
</style>

要过渡的属性： 想要变化的 CSS 属性，宽度高度，背景颜色，内外边距都可以，如果想要所有的属性都变化过渡，写一个all就可以
花费时间： 单位是秒(必须写单位) 比如0.5s
运动曲线： 默认是ease(可以省略)
何时开始： 单位是秒(必须写单位)，可以设置延迟触发事件，默认是0s(可以省略)

<style>
    div {
        width: 300px;
        height: 300px;
        background-color: lightblue;
        transition: width 0.5s, height 0.5s;
        /* transition: 变化的属性 花费时间 运动曲线 何时开始; */
        transition: all 0.5s;
        /*属性设置为all，可以让多个属性都变化 */
        }
    div:hover {
        width: 400px;
        height: 400px;
        background-color: lightgreen;
        }
</style>