CSS基础七

• 精灵图

指 多张小图合并成为一张大图，使用背景图定位显示效果，

要提前写出精灵图显示框的大小，以便剪切

好处在于减少服务器多次上传图片，加快网页打开效率

background-position: -0px -0px; 定位

• 背景图片的大小

background size

分为 background size cover   覆盖：  直到盒子被完全填满

background size contain 包含 ： 直到图片放大到一边贴到边框

或者在 background size 后直接设置数字px ，百分比 直接缩放

• 阴影

分为盒子阴影与文字阴影

box shadow 水平 垂直 模糊度 颜色 内阴影

box-shadow： h-shadow   v-shadow  spread  color   inset;

依次填写

box shadow 水平距离

box shadow 垂直距离

box shadow blur 模糊度

box shadow color 阴影颜色

box shadow spread 阴影扩大

box shadow inset 盒内阴影

• 文字阴影

text shadow 水平 垂直 模糊度 颜色 内阴影

text -shadow： h-shadow   v-shadow  spread  color   inset;

依次填写

text shadow 水平距离

text shadow 垂直距离

text shadow blur 模糊度

text shadow color 阴影颜色

text shadow spread 阴影扩大

text shadow inset 盒内阴影

• ico图标

直接link favicon

在跟目录中添加

• 过渡属性

transition

transition all:所有能过度的使用都过度

需要过渡时间直接   +数字S

谁进行了变化，就把过渡显示给谁加，让他存在过渡属性，当变化时 就移入移出都有变化

默认状态 移入移出都有过渡效果

给hover标签加时 只有移入有效果移出没有效果