CSS3 精华一页纸

CSS3 对应CSS新增特性

盒子模型

---

盒子模型的 边框

1、可以有圆角 border-radis

2、可以有图片 border-image / 当然还有图片填充效果

盒子模型的 阴影

1、box-shadow 任何元素都可以使用阴影

通过阴影，可以实现立体卡片式 的效果； 用作做文字便签/图像的便签；比如 京东和途牛点评的卡片贴

2、text-shadow 文本也有了阴影效果

盒子模型的 width/height

1、使用 box-sizing 可以指明 width/height 是指的哪一部分

背景

---

背景图片的特效

1、可以支持同时多个图片做为背景叠加，分别做平铺处理

2、可以控制背景图片的大小，占满整个元素（在2中，只能平铺等处理）

3、可以控制背景图片在 盒子模型中的显示 区域

增加了很多PS才有的特色功能

1、渐变效果：线性渐变 linear-gradient/radial-gradient 可以指定任意角度，是否重复，等各种渐变效果

2、图片滤镜：实现各种 饱和度/色彩/模糊 功能的用法

可以自有使用浏览器字体外的字体

@font-size

响应式布局

---

多媒体查询 + 响应式图像 = 响应式web页面 （PC/移动端自适应？）

1、通过 @media 多媒体查询，可以 使用PC的各种浏览器调整； 更可以通过这个适应 移动端

2、响应式图像，避免了图像的扩展溢出超过父元素的大小

补充阅读：响应式web，媒体查询

动画

---

2D转换 & 过渡

1、通过 2D转换 实现很多动态效果，最常用的是 translate 沿着x，y轴移动元素，比如实现的 按钮按下/弹起效果；scale ，图像从小变大，从大到小的变换。

2、通过使用 transition [属性] 时长，实现过渡效果

这两者结合可以实现，很多 组件的动画效果。

同时 2D转换 还可以结合 动画 实现类似效果

动画

1、@keyframes donghua 定义动画过渡的多个样式，可以是 from to 或者 百分比

2、在 元素样式中指定 这个动画 animation:donghua 5s;

弹性盒子布局

新增的布局好像没啥太多的使用意义？

杂项

文本换行 word-wrap；多列 column-count

总结就是

1、增加了动画效果：2D转换 过渡 动画

2、增加了显示立体感：盒子模型的阴影/圆角 背景图片等等

3、响应式web页面