1、圆角边框 border-radius
指定1个参数,四个圆角都使用该长度作为半径
指定2个参数,第一个参数作为左上角和右下角半径,第二个参数作为右上角和左上角半径
指定3个参数,第一个参数作为左上角半径,第二个参数作为右上角和左下角半径,第三个参数作为右下角半径
2、边框阴影box-shadow
水平偏移 垂直偏移 阴影模糊程度
内部阴影{box-shadow:inset * * *}
动画
1、渐变动画transition
第一个参数:对指定元素进行处理
第二个参数:定义持续时间
第三个参数:指定渐变速度
如果想设置多个属性的渐变动画,使用逗号分隔
transition:width,height 1s,1s ease,ease
2、animation动画
第一个参数:指定动画的名称
第二个参数:指定动画的持续时间
第三个参数:指定动画的变化速度
<style>
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
}
@keyframes myfirst
{
0% {background:red;}
20% {background:green;}
40% {background:blue;}
100% {background:orange;}
</style>