边框
|------盒子圆角
|---------border-radius：5px / 20%；
|---------border-radius:5px 4px 3px 2px; 左上，右上，右下，左下
|------盒子阴影 box-shadow：
|---------box-shadow:x轴偏移量 y轴偏移量 阴影模糊半径(阴影颜色的模糊程度) 阴影扩展半径 阴影颜色 投影方式
注意：inset 是指阴影在盒子内部，默认在外部，inset写到第一个或者最后一个参数位置，其他位置是无效的
|---------值有3个时，表示距离左侧、距离上侧、影子颜色
|---------值有4个时，表示距离左侧、距离上侧、虚化的像素、影子颜色
|---------值有5个时，表示距离左侧、距离上侧、虚化的像素、影子颜色、是否显示在内部并且将颜色进行反转
|---------负值时，在相反的方向
背景
|------引入 background-image
|------背景尺寸 background-size
|---------auto 默认值，不改变大小
|---------cover 填充整个外层容器
|------背景平铺 background-repeat
|------背景位置
|---------位置定位1（background-origin）
|------------根据文本位置：content-box
|------------根据边框位置：border-box
|------------根据内边距位置:padding-box
|------------使用这个属性，必须设置背景为no-repeat
|---------位置定位2（background-position）
|------------top
|------------bottom
|------------left
|------------right
|------------background-position:距左多少 距右多少
|------多重背景
逗号分割：background-image:url(images/bg_flower.gif), url(images/border.png); background-repeat:no-repeat;
字体
|------文本阴影
|---------text-shadow：三个值：分别代表距离左侧、距离上侧、阴影颜色 阴影会显示文字
|---------text-shadow：四个值：分别代表距离左侧、距离上侧、模糊程度及阴影颜色
|------文本溢出属性
|---------overflow: hidden; white-space:nowrap;让文本强制不换行 要先设置这两个属性
|---------text-overflow
|------------clip：修剪文本。
|------------ellipsis：显示省略符号来代表被修剪的文本
|------------自定义（string）：自己定义符号，给定的字符串来代表被修剪的文本
|------文本换行属性 word-break:
|---------word-break:break-all 它的内容就会到200px自动换行 如果该行末端有个英文单词很长会把单词截断。
|---------word-break:break-word; 如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断。
颜色RGBA与透明度opcity
|------R：红 G：绿 B：蓝 alpha:透明度的参数
|------RGB的取值范围是0~255/0~100% alpha的取值范围是0~1 不可为负值
|------opcity：范围0-1
渐变颜色
|------background-image: linear-gradient(to bottom,#fff,red);参数说明：第一个参数指定渐变方向 to top,to bottom,to right,to left,to top left......
第二和第三个参数：是指定开始与结束的颜色值 可以有多个颜色background-image: linear-gradient(to bottom,#fff,black,red);
图片
|------图片圆角 border-radius: 50%;（设置椭圆形）
|------设置图片为响应式 max- 100%;height: auto;
|------图片阴影 box-shadow
|------图片滤镜 filter
旋转
|------2D transform
|---------rotate()——进行旋转，括号内部写旋转角度，默认顺时针旋转.允许负值，元素将进行逆时针旋转
|---------translate()——从当前位置进行移动，括号内为x，y值。允许负值，将反方向移动
transform:translate(30px,30px)：向右30px，向下30px移动，原来位置保存
|---------scale()——改变原始尺寸，按照倍数变化，括号内为width、height的倍数
transform:scale(2,4)：宽度变为2倍，高度变为4倍
|---------skew()——水平、垂直方向进行扭转，括号内是水平扭转角度、垂直扭转角度
transform:skew(30deg,0deg);将横向扭转30度的div，内部文字会跟随扭转
transform:skew(0deg,30deg);将纵向扭转30度的div，内部文字会跟随扭转
transform:skew(30deg,30deg);将横向扭转30度、纵向扭转30度的div，内部文字会跟随扭转
|------3D transform
|---------rotateX()——沿水平X轴进行垂直的翻转，括号内写转动度数
|---------rotateY()——沿垂直Y轴进行水平的翻转，括号内写转动度数
|------2D与3D的区别
2D转换跟3D转换的区别：2D转换仅仅在于平面，文字可以看出并没有反过来.3D转换是相当于镜面效果的，进行了前后空间（涉及到了Z轴）的占用进行的翻转。
过渡
|------transition：专门应对颜色、长度、宽度、位置等变化的过渡
#aaa{ width:200px; height: 200px; border: 1px solid red; transition:2s; }
弹性盒子 CSS3的一种新的布局模式
|------定义为弹性盒子
|---------display: flex;考虑浏览器兼容问题
|------弹性子元素在父容器中的位置排列（横向、纵向） flex-direction
|--------- row：横向从左到右排列（左对齐），默认的排列方式。
|---------row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
|---------column：纵向排列。
|---------column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
|------弹性盒子的子元素换行方式
|---------nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行。wrap-reverse -反转 wrap 排列
|------弹性子元素在父容器中的对齐方式
|---------横向对齐 justify-content：
|---------纵向对齐 align-items：
|------弹性子元素如何分配空间 flex
.flex-container { display: flex; width: 400px; height: 250px; } .item1 { flex: 2; } .item2 { flex: 1; } .item3 { flex: 1; }
|------子元素的属性
|---------order 排序
|---------margin 间距
|---------align-self 轴对齐方式