CSS3

一.CSS3新增的内容：

1.颜色：新增RGBA，HSLA模式
2.文字阴影（text-shadow、）
3.边框： 圆角（border-radius）边框阴影： box-shadow
4.盒子模型：box-sizing
5.背景：background-size -设置背景图片的尺寸 background-origin -设置背景图片的原点 background-clip -设置背景图片的裁切区域，以”，”分隔可以设置多背景，用于自适应布局
6.渐变：linear-gradient、radial-gradient
7.过渡：transition，可实现动画
8.自定义动画
9.在CSS3中唯一引入的伪元素是 ：selection.
10.媒体查询，多栏布局
11.border-image
12. 2D转换：transform：translate(x，y) rotate(x，y) skew(x，y) scale(x，y)
13. 3D转换

属性：

  css3的样式  边框和文本：
                    text-shadow:给文本设置一个或多个阴影
                    word-wrap:normal break-wrap(在长单词或 URL 地址内部进行换行) -----允许文本强制换行，即长单词换行到下一行，在区域范围内

                    box-shadow:给边框设置一个或多个阴影
                    border-radius
                    border-image：图片边框

                    背景：
                    background-size:背景图片的尺寸
                    background-origin:规定背景图片的定位区域  
                                      content-box  内容区域
                                      padding-box  内边距区域
                                      border-box   边框区域
                    css3可以使用多重背景图片，即可以同时插入多张背景图片
                     -----------background-image:url(bg_flower.gif),url(bg_flower_2.gif);

                     2D转换
                     transform：translate(x,y)--------将元素沿X轴 Y轴--平移移动，两者将同时移动，所以会出现斜线运动
                                rotate()--------------将元素顺时针旋转(正值)  逆时针旋转(负值)
                                scale(宽，高)---------------将元素进行缩放(宽高)
                                skew(X，Y)---------------------元素沿着X，Y轴实现2D倾斜转换
                                matrix()----------------综合(旋转，缩放，移动，倾斜)
                                transform:matrix(0.866,0.5,-0.5,0.866,0,0);
                    
                    3D转换
                    transform:translateX() translateY() translateZ()
                               rotateX() rotateY() rotateZ()
                    transform-origin:20%(X)  40%(Y)  0(Z) ---允许被改变元素的位置，改变元素的基点 
                    transform-style:preserve-3d(子元素将保留3d位置和空间)  flat(子元素将不保留3d位置和空间)----给父元素设置
                    perspective:500px;-------元素被查看位置的视图；即相当于Z轴坐标的正值，越大，视图就越大，越小视图就越小；
                    perspective-origin:10% 20%----------------3D元素的基点位置(X轴，Y轴)

                    过渡效果
                    transition:time---;(过渡的属性名称，过渡的时间，过渡的时间曲线，从何时开始过渡)
                                        (width,2s,ease/linear,1s)

                    定义动画
                        @keyframes myframe(动画名称){
                            0%     {...样式...}
                            25%    {...样式...}
                            50%    {...样式...}
                            75%    {...样式...}
                            100%   {...样式...}
                        }/**/定义动画的过程和样式
                        div{
                            animation:myframe 5s ease/linear 2s infinite/(数字) alternate running ;
                                    /*动画的名称 执行动画的时间 动画的速度曲线 动画从何时开始 动画循环的次数 动画是否逆向播放 动画是否运行
                        }

css3的伪类：

 css伪类：
                a:link(未被访问的链接)
                a:visited(已经访问的链接)
                a:hover(鼠标移动到链接上去)
                a:active(已选用的链接)
                ... :first-child(选定父元素的第一个子元素)
                p:first-child-------选定第一个p元素
                p > i:first-child -----匹配所有的p标签的第一个i标签

css3分类属性：

  css分类属性：
                    clear   设置一个元素的侧面是否允许其他的浮动元素。left right both(两边都不设置) none(允许出现在两侧) inherit(继承父级元素)
                    position
                    float
                    display
                    cursor  规定当指向某元素之上时显示的指针类型。auto(浏览器默认) pointer  move(表示可以移动的光标) text(表示文本的光标) wait(表示程序在忙) help(鼠标旁边有一个问号，帮助)
                    visibility  	设置元素是否可见或不可见。visible(默认值) hidden(表示隐藏) inherit(父级继承)