CSS3基础之filter、calc函数、transition过渡
文章目录
- 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>
