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页面

你可能感兴趣的:(CSS3 精华一页纸)