css3边框与动画整理

边框设置

border：none；去除边框

boerde-radius：5px；设置圆角

阴影设置

外部：box-shadow：水平 垂直 模糊 缩放 颜色；（5px 5px 5px 5px #fffff）

内部：box-shadow： inset 水平 垂直 模糊 缩放 颜色；

动画

渐变动画

transition：名称 持续时间 渐变速度 延迟时间（大于两个：名称 名称；时间 时间；ease ease；）

div
    {
        width:100px;
        height:100px;
        background:red;
        transition:width 2s;
    }
    div:hover
    {
        width:300px;
    }

animation动画

animation：名称 持续时间 渐变速度 延迟时间

div
    {
        width:100px;
        height:100px;
        background:red;
        animation:myfirst 5s;

    }

    @keyframes myfirst
    {
        0%   {background:red;}
        25%  {background:yellow;}
        50%  {background:blue;}
        100% {background:green;}
    }

@keyframes关键帧