CSS3学习笔记{注意浏览器和版本}

1.边框：支持阴影，图片，圆角率；可以分别定义每个边的样式{border-radius}

2.背景：支持图片(不)铺满{background-repeat}

3.颜色：支持渐变，上到下，左到右，或者以某个角度扩散；可以调整颜色占比{linear-gradient}

4.文字：支持阴影，单字符过长换行，字符行超出隐藏{text-overflow}

5.字体：支持使用项目外定义的字体{font-family}

6.移动：面上移动某一块2D{translate：上下移动；rotate：旋转移动；skew：在x/y轴移动；matrix：同时包含以上移动}

7.移动：空间上移动3D { rotateX/rotatey：支持2D同等移动}

8.过渡：样式之间相互转变，时间{div:hover}

9.动画：{ from {background: red;} to {background: yellow;}}

10.多列：制定列数，列间隔样式{column-rule}

11.用户界面：自定义宽高，添加外边框修饰(不占空间){resize:both;overfolat:auto}{outline-offset:15px}

12.图片：缩略图(border:1px solid gray类似于offline),定义图片上文本样式；图片滤镜

13.按钮：各种样式，边框，圆角，阴影，禁用，水波效果，增加>>新样式，按压效果

14：分页

15：框大小：box-sizing: border-box;不设置宽高和padding分开计算；设置过后，宽高已经包含padding

width(宽) + padding(内边距) + border(边框) = 元素实际宽度

height(高) + padding(内边距) + border(边框) = 元素实际高度

16：弹性盒子模型：{.flex-container；.flex-item }

17：多媒体查询：not/only/all {@media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {}}