CSS3 新特性(box-sizing盒模型,filter滤镜)

1.盒子模型(box-sizing)

CSS3 中可以通过 box-sizing 来指定盒模型,有两个值:即可指定为 content-box、border-box,这样我们计算盒子大小的方式就发生了改变。

可分为两种情况:

 1. box-sizing:content-box   盒子大小为 width + padding + border(默认)

 2. box-sizing:border-box     盒子大小为 width

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

2. CSS3 滤镜(filter)

 filter CSS属性将模糊或颜色偏移等图像效果应用于元素

 filter:函数( );   例如:filter:blur( 5px );   blur 模糊处理,数值越大越模糊

3. CSS3 calc 函数

 calc( ) 在声明CSS属性值时执行一些计算

 width:calc(100% - 30px);   // 宽度永远比父盒子(本身)小 30 像素

 括号里面可以使用 +  -  *  /   来计算

猜你喜欢

转载自www.cnblogs.com/qtbb/p/11738461.html