边框设置
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关键帧