css3

1：制作圆，半圆，可用border-radius来制作
2：box-shadow阴影效果【参数：x轴偏移量（必选），y轴偏移量（必选），阴影模糊半径（可选），阴影扩展半径（可选），阴影颜色（可选），投影方式【insert 内阴影，只能位于第一个或最后一个】】
3：border-image 为border画上背景图片【参数url：图片路径；切割图片的宽度：遵循顺时针的规律（一般为border的大小）；图片延伸方式：round、平铺，stretch、拉伸，repeat、重复】
4：颜色rgba（R,G,B,A） 【A为透明度参数，另外的是颜色的取值0~255】
5：颜色渐变（线性：linear-gradient；径向：radial）
5.1 线性参数【渐变方向：to top、从上到下，to right，to bottom，to left，to top left、右下角左上角，to top right 左下角右上角；颜色起始点；颜色结束点（颜色可设多个）】
6：文本和字体
text-overflow：用来设置是否使用一个省略标记（………..）表示对象内文本的溢出
text-overflow：clip/ellipsis【clip：剪切；ellipis：表示显示省略标记，要与overflow+white-space一起使用】
word-wrap：normal 表示控制连续文本换行
7：嵌入文本 【@font-face 能够加载服务器端 的字体文本，让浏览器端可以显示用户电脑里没有安装的字体】
@font-face{font-family：字体名称；src：字体文件在服务器上的相对或绝对路径}
设置之后，页面其他地方也可以使用。
8：文本阴影 text-shadow：X-offset、Y-offset、blur（阴影的垂直偏移程度）、color；
9：背景
9.1background-origin 【设置元素背景图片的原始起始位置】
background-origin：border-box | padding-box | content-box
9.2 background-clip【背景剪切】：border-box | padding-box | content-box | no-clip
9.3 background-size：auto | <长度值（成对出现）> | <百分比> | cover(覆盖) | contain(容纳)
10：属性选择器
E【att^=“/val”】（att属性以val开头的） 、 E【att$=val】（att属性以val结尾的） 、 E【att*=val】（att属性里包含val）
11：：not选择器称为否定选择器
例如：input:not([type=”sumbit”]) 除去type=”sumbit”
12：：target结构性伪类选择器，和锚点链接类似，只是为锚点的跳转加上一个样式
【锚点：(a id/name=’top’)top部分（/a）(a href=”#top”)点击我跳到top部分(/a)】
13:first-child 选择父元素的第一个子元素的元素
last-child 选择父元素的最后一个子元素
nth-child(n) 定位某个父元素的一个或多个特定的子元素，n为其参数（整数，表达式，odd奇数/even偶数）
nth-last-child（n）从父元素的最后一个子元素开始计算
first-of-type 指定了元素的类型，用来定位一个父元素下的某个类型的第一个子元素
::selection 伪元素是用来突出显示的文本（用鼠标选择文本时的效果）

::before/::after 主要用来给元素的前面或后面插入内容，常用“content”配合，使用的场景最多的就是清楚浮动（可以用来制作阴影效果）

transform变形
1：rotate 旋转
2：skew 扭曲【skew(x,y)/skewX(x)/skewY(y)】
3:scale 缩放【scale(x,y)/scaleX(x)/scaleY(y)】
4:translate位移【translate(x,y)/translateX(x)/tanslateY(y)】

transition 过度
transition-property 指定过渡或动态模拟的css属性【例：color】
transition-duration 指定完成过度所需的时间
transition-timing-function 指定过渡函数
transition-delay 指定开始出现的延迟时间
例：tansition：all 5s ease-in 2s

keyframes 关键帧
语法：@keyframes 动画名称{}；
animation-name 用来调用@keyframes定义好的动画。
动画名需要和@keyframes定义的动画名称完全一致。

animation—“ ”【name/duration/timing-function(时间动画播放方式)/delay(延迟)/iteration-count(次数)/direction(方向)/play-state(状态paused/running)/fill-mode】

伸缩布局Flexbox 轻松的实现屏幕和浏览器窗口大小变化时保持元素的相对位置和大小不变
1：任何一个flexbox布局的第一步是需要创建一个flex容器
如：flexcontainer{display：-webkit-flex；display:flex}

2：Flex项目显示
项目是容器的子元素，他们沿着主要轴和横轴定位，默认的是沿着水平轴排列一行，可以通过flex-direction来改变轴方向【column/row（默认）】

3：Flex项目列显示
.flexcontainer{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;}

4：项目移到顶部【align-items垂直方向；justify-content水平方向】
.flexcontainer{display：-webkit-flex；display：flex；-webkit-flex-direction:row/column;-webkit-justify-content:flex-start;flex-direction:row/column;jusitify-content:flex-start;}

5：项目移到左边【若flex-direction:row(justify-content)/column(align-items)】
.flexcontainer{display:flex;flex-direction:row;-webkit-flex-direction:row;justify-content:flex-start;-webkit-justify-content:flex-start;}

6:项目移动到右边，只需将【align-items/justify-content的值设成flex-end即可】

7：项目居中，只需将【align-items/justify-content的值设成center即可】

8：项目是想自动伸缩
看可以定义一个flex项目，如何相对于flex容器实现自动的伸缩。需要给每一个flex项目设置flex属性设置需要伸缩的值
例：.bigitem{-webkit-flex:200;flex:200}

css3 用户界面
1：自由缩放属性resize
允许用户通过拖动的方式修改元素的尺寸来改变元素的大小
语法：resize:none/both(可拖动同时修改高宽)/horizontal(可拖动，改变宽)/vertical(可拖动，改变高)/inherit(继承父元素)

2：box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。
语法：box-sizing：content-box|border-box|inherit;【content-box：宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框；border-box：为元素设定的宽度和高度决定了元素的边框盒，通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。；inherit：规定应从父元素继承 box-sizing 属性的值】

3：outline-offset属性对轮廓进行偏移，并在边框边缘进行绘制。
语法：outline-offset: length|inherit;【length：轮廓与边框边缘的距离；inherit：规定应从父元素继承 outline-offset 属性的值。】

4：outline 外轮廓属性
语法：outline:outline-color | outline-style | [outline-width] | outline-offset | inherit(继承父元素)

css3 zoom属性可以设置或检索对象的缩放比例
语法：zoom:normal | ‘number’ | ‘percentage’;【normal：使用对象的实际尺寸。number：用浮点数来定义缩放比例，百分数 | 无符号浮点实数，浮点实数值为1.0或百分数为100％时相当于此属性的 normal 值用白话讲解就是zoom:后面的数字即放大的倍数，可所以数值，也可所以百分比，不允许负值*percentage：用百分比来定义缩放比例，不允许负值*】

css生成内容
伪类:before,:after和伪元素::before,::after，这几的使用，关键在于“content”属性来实现
content配合css的伪类或伪元素，一般可以做一下四件事情
1：none ：不生成任何内容

2：attr：插入标签的属性值

3：url：使用指定的绝对或相对路径

4：string：插入字符串