web知识

一.渐变:

1.background-image:linear-gradient 线型渐变

2.background-image:repeating-linear-gradient 重复线型渐变

3. background-image:linear-gradient(to top,red,yellow); to top 从下向上红色到黄色的渐变

4. background-image: linear-gradient(red 20%,yellow 40%,yellow), 0~20%是红色，20%~40%之间是红黄渐变，40%~100%是黄色.

5.background-image: repeating-linear-gradient(#33baf1,#33baf1 20px,#00abf0 20px,#00abf0 40px)

二.径向渐变:

1.background-image:radial-gradient

三.过渡动画:

transition: background-color 1s;

第一个值:需要过渡的属性

第二个值:过渡动画的时间

transition: left 0.4s ease 0.2s;

动画属性名 动画时长 运动曲线(慢进快出) 动画延迟时间

四.阴影:

box-shadow: 5px( 水平偏移距离) 5px(垂直偏移距离) 5px(模糊距离) 5px(阴影大小) black(阴影颜色) inset(内部阴影选用);

五.照片路径:

1.相对路径: . / (当前目录)

../ (上一级目录)

/ (根目录)

img/ (img文件下)

2. 网址:http://www.ujiuye.com/statics/images/newzhu_images/logo.png

磁盘: C:\Users\IBM\Desktop\0815Web\day03\case\img