css3

border-radius:圆角 输入百分比50%是一个圆形

box-shadow:水平阴影的位置 垂直阴影的位置 模糊距离 都是以像素为单位

background-origin：图片在div中开始的地方content-box是从内容开始、padding-box(默认) 或 border-box 是从边框开始；

box-sizing:content-box(默认)，border-box;border-box设置后width/height包含border/padding/content设置到所有里面*{}

text-shadow文本阴影     word-wrap:自动换行 内容是英文使用

2D转换/3D转换：

transform:translate(top,left):从其当前位置移动;rotate(30deg):顺时针旋转给定的角度；scale(1.1):元素尺寸增加或减少;skew(30deg,20deg):翻转给定的角度,根据x轴和y轴；

过渡：

transition:width 2s; 添加这个属性要div有宽度或者高度的变化才可以,

6、动画：

@keyframes myfirst 这个是自定义的名字 用的时候调用这个名字 animation:动画名 2s写在元素里

{

from{background:red;}

to{background:yellow;}

}

实现简单的动画

 .ab{

            width: 100px;

            height: 100px;

            border: 1px solid #000;

            /* 用animation后面跟定义动画的名字 加时间来使用动画 */

            animation:myfirst 10s;

        }

        @keyframes myfirst{

            /* 这是定义背景颜色 */

            from{background:red;}

            to{background:yellow;}

            /* 定义宽度 */

            20%{

                width: 50px;

            }

            50%{

                width: 100px;

            }

            100%{

                width: 150px;

            }

        }