四十一、CSS3的新特性（下）

一、CSS3的新特性

1.1、CSS3盒子模型

css3中可以通过来指定盒子模型，有2个值：即可指定为、，这样我们计算盒子大小的方式就发生了改变。
可以分为两种情况：

1. box-sizing:content-box 盒子大小为 width + padding + border （以前默认的）
2. box-sizing:border-box 盒子大小为width

如果盒子模型我们改为了box-sizing:border-box，那padding和border就不会撑大盒子了（前提padding和border不会超过width宽度）

    
    
    
    
    


    

        小猪乔治
    
    

        小猪佩奇
    

image.png

1.2、CSS3其他特性（了解）

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

   
   
   

   image.png

image.png

2. 计算盒子宽度 width:calc 函数

   
   
   

   image.png

image.png

1.3、CSS过滤（重点）

transition: 要过滤的属性 花费时间 运动曲线 何时开始;

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

image.png

image.png

1.4、进度条练习

image.png

二、总结

狭义的HTML5 CSS3

image.png

广义的HTML5

image.png