css3新增属性总结1

边框属性： border-radius(圆角)，box-shadow(阴影)，border-image(图片边框)

           圆角：border-radius:50%/50px    可用%或者像素

           阴影： box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 颜色   inset/outset内外阴影

           图片边框 ：border-image:url(1.png) 30 30 round  ;

                      依次为 border-image-source 边框图片路径，border-image-slice 边框向内偏移，border-image-width 边框宽度，

                                  border-image-outset 图像区域超出边框的量，border-image-repeat 平铺 repeated/铺满 rounded/拉伸stretched

背景：background-size（背景图片尺寸），background-origin(背景图片定位区域)，background-clip(背景的绘制区域)

        背景尺寸：background-size：px/% ；px尺寸是图片的实际尺寸  ，%尺寸相对于父元素的宽度和高度。

        背景区域：background-origin:padding-box/border-box/content-box;(相对于内边框/边框盒子/内容框定位)  

        背景绘制：background-clip:padding-box/border-box/content-box;(背景被裁剪到内边距框/边框盒子/内容框)

文本效果：text-shadow(文本阴影)，word-wrap(强制文本换行)，text-wrap(换行规则)

        文本阴影：text-shadow：水平 垂直 模糊 颜色

        强制换行：word-wrap：normal/break-word(断点字换行/长单词强制换行)

       换行规则：text-wrap：normal/none/unrestricted/suppress

                                               normal:只在允许的换行点进行换行。

                                               none：不换行，元素无法容纳的文本会溢出。

                                               unrestricted：在任意两个字符间换行。

                                               suppress：压缩元素中的换行

3D转换：transform:rotate/translate/scale/skew/matrix

               rotate角度转换允许负值  transform:rotate(30deg)  分rotateX,rotateY

               translate位置移动  transform:translate(left,top)   分transformX,transformY

               scale元素尺寸成倍分改变transform:scale(宽倍分，高倍分)  分scaleX,scaleY

              matrix所有2D组合 六个参数（数学函数，允许您：旋转，放缩，移动，倾斜）

过渡动画：transition:width 1s linear 2s,height 1s linear 2s

依次为：transition-property:width   过渡的属性名                        transition-duration:1s 过渡效果花费的时间

              transiton-timing-function 过渡效果的曲线默认ease        transition-delay:过渡何时开始默认0

             

@keyframes规则

 

解释依次为：animation-name:myfirst  动画的名称                                         animation-duration:5s  完成所花费的时间

                     animation-timing-functiom:linear 动画的曲线                            animation-delay:2s 动画何时开始

                     animation-iteration-count:infinite 动画播放次数（循环）          animation-direction:alternate按原动画逆向播放

                            animation-play-state动画是否运行或暂停                                                       animation-fill-mode 对象动画时间之外的状态