精灵图及css3的特性

1.概念

• css spriteye叫精灵图雪碧图，是一种网页图片应用处理方式，它允许你将一个页面涉及到的所有的零星图片集合到一张大图中，这样一来，当访问当页面时，就有原来的多次请求变为一次请求。客户端每显示一张图片都会想服务器发送一次请求，图片越多请求性就越大，同时对服务器会造成压力，所以页面中如果多个icon（小图标）时，推荐使用精灵图。

2.优点

• 1.减少网页的http请求，从而提升网页的性能
  2.减少图片的字节

3.原理

1.需要一个设置好宽高的容器
2.通过backrgound-img引入背景图片
3.通过backrgound-position将背景图移动需要的位置即可
4.backrgound-position：100px左右值 100px上下值

CSS3新特性

1.背景

【补充】背景色与背景图是可以一起设置的。

背景尺寸：background-size

设置背景图片的尺寸。

属性值：

• px
• 百分比
• 单词。

px像素法

background-size:宽 高;

如果只设置一个值，则为设置宽，高为自适应。

百分比

background-size:50% 50%;

百分比是相对于设置背景的盒子的宽高而言的，不是图片的宽高。

如果只设置一个值，则为设置宽，高为自适应。

auto表示自适应，如果设置固定高，让宽去自适应，可以这样设置

background-size:auto 50%;

单词

• cover
• contain

区别：

1. 两者都会自动调整图片的缩放比例，保证背景图不会失真。
2. cover会保证图片始终填满背景区域，如果有溢出部分，则隐藏。也就是说，保证背景图片完全覆盖盒子，但是不保证图片完整的显示。
3. contain 保证图片始终完整显示在背景区域，不保证能铺满整个背景区域。

背景圆点 background-origin

控制背景从哪里开始显示

• content-box 从内容区域开始显示背景图
• padding-box 从内边距区域开始显示背景图
• border-box 从边框区域开始显示背景图

背景裁切 background-clip

• content-box 超出内容区域的背景图会被裁剪掉
• padding-box 超出内边距区域的背景图会被裁剪掉
• border-box 超出边框区域的背景图会被裁剪掉

背景固定background-attachment

• scroll 滚动（默认值）
• fixed 固定 （背景图在视口中固定显示，不会随滚动条滚动）

综合属性 background

为了可读性，定一个CSS书写规范，规则2.1：

background的值的顺序是background-color，background-image，background-repeat，background-attachment，background-position。

该顺序可以随意调换。

其余三个建议单独写 background-size，background-origin，background-clip

可能的值

值	描述	CSS
background-color（掌握）	规定要使用的背景颜色。	1
background-position（掌握）	规定背景图像的位置。	1
background-size（掌握）	规定背景图片的尺寸。	3
background-repeat（掌握）	规定如何重复背景图像。	1
background-origin（了解）	规定背景图片的定位区域。	3
background-clip（了解）	规定背景的绘制区域。	3
background-attachment（了解）	规定背景图像是否固定或者随着页面的其余部分滚动。	1
background-image(掌握)	规定要使用的背景图像。	1
inherit	规定应该从父元素继承 background 属性的设置。	1

渐变（了解）

css3渐变可以实现两个颜色或者多个颜色之间的平稳过渡。

渐变分为两种：

• 线性渐变：沿着某条直线朝一个方向产生渐变效果。
• 径向渐变：从一个中心点向四周产生渐变效果。

线性渐变

background-img:linear-gradient(方向，开始颜色...结束颜色)

方向:

• 单词：to right，to left，to top， to bottom
• 角度 单位为deg

径向渐变

background-image: radial-gradient(辐射的半径大小（可选） at 中心位置，开始颜色...结束颜色);

中心位置：

• 单词 center，top，left，right，bottom 第二个值不写默认为center
• px 中心点默认为左上角

如果辐射半径的宽高不同，会显示为椭圆。

文本

文本阴影 text-shadow

格式：

text-shadow：水平偏移量  垂直偏移量  模糊度 阴影颜色。

可以为文本设置多个阴影，多个阴影需要用逗号隔开。

边框

边框圆角 border-radius

格式：

border-radius：10px

上面这句话的意思为：将边框的四个角设置为以10px为半径的圆的弧度、

单个角度的写法：先写上下，再写左右

//设置左上角的弧度
border-top-left-radius: 20px;

复合写法：

border-radius：10px;

一个值为四个角的弧度。

二个值：第一个值为 左上和右下，第二值为右上和左下。

三个值：第一个值为左上，第二个值为右上和坐下，第三个值为右下。

四个值：从左上角开始 顺时针 分别为 左上，右上 右下 左下。

圆角的取值范围：0-----边长的一半

画一个圆

1. 盒子必须是一个正方形
2. 设置盒子的border-radius为宽的一半。

画一个半圆

1. 盒子必须是一个矩形
2. 设置盒子的border-radius为短边的长度。

边框阴影 box-shadow

box-shadow:水平偏移量 垂直偏移量 模糊度(可选) 阴影大小（可选） 阴影颜色（可选，默认为黑色）内外阴影。（可选：inset 内阴影）

边框阴影也可以设置多个，多个之间用逗号分隔

过渡

transition：过渡。css3新增的一个功能,可以实现元素不同状态间的平滑过渡。

transition：过渡的属性 过渡时间 运动曲线  延迟时间。

过渡的属性：transition-property

​ 要设置的过渡属性，该属性值必须有中间状态。比如说：width。height这种属性值为数字的，以及颜色，背景色，字体颜色等。颜色本身也可以使用数字表示。

all特殊字符表示 所有属性都设置为过渡属性。

过度时间：transition-duration

​ 单位： s ms 1s=1000ms

运动曲线（可选）transition-timing-function

• linear:匀速（常用）
• ease 默认值，减速（常用）
• ease-in 加速
• ease-out 减速
• ease-in-out 先加速后减速

延迟时间（可选）transition-delay

设置过渡生效的延迟时间，单位 可以为 s 或者ms。