Css3总结-雪碧图和渐变

雪碧图

1. 解决之前留下的按钮图片的变化练习中图片的闪烁问题

• 原料：将原来三张按钮图片连在一起的一张图片；背景介绍过的background-position属性
• 出现图片闪烁的原因：网页的懒加载机制；将多个小图片保存在一张大图片中，刷新网页的同时一遍加载
• 这个技术在网页中运用十分广泛，被称之为css-sprite，这种图我们称之为雪碧图

2. 雪碧图的使用步骤：
   先确定要使用的图标
   再测量图标的大小
   根据测量结果创建一个元素
   将雪碧图设置为元素的背景图片
   设置一个偏移量以显示正确的图片
3. 雪碧图的特点
   优点：一次性将多个图片加载进页面，减少请求次数，加快访问速度，提升用户体验。
   缺点：只适用于背景图background-image属性，如果是img标签，就不能用。

渐变

通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果。
渐变是图片，可以通过background-image来设置

linear-gradient 线性渐变
沿着一条直线发生变化

线性渐变的开头，我们可以指定渐变的方向
45deg 表示度数，45度
to top left
.5turn 转半圈
deg表示度数
turn表示圈

linear-gradient(red,yellow)：红色在开头，黄色在结尾，中间是过度区域（上下方向）
linear-gradient(to right,red,yellow)：从左向右

radial-gradient 径向渐变
默认情况下，径向渐变圆心的形状是根据元素的形状来计算的。
我们也可以指定径向渐变的大小：
background-image:radial-gradient(100px,100px,yellow,red)

circle 正圆
ellipse 椭圆
也可以指定渐变的位置 at 0 0
farthest-side 远边
closest-corner 近角
位置：top bottom left right center