课堂笔记4

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>