基础班第12天
背景系列
多重背景
在css3中，背景是可以写多个的，只需要用连写即可，中间用逗号隔开
background: url(图片地址1) no-repeat,url(图片地址2) no-repeat;背景图片基准点
默认背景图片以padding的起始点开始平铺，在css3里面可以设置其基准点
background-origin: 值
值：
padding-box 默认值 从padding的初始位置开始
border-box 从边框的初始位置点开始
content-box 从内容区域开始背景缩放
控制背景图片的缩放
background-size: 值;
值可以是像素、百分比、contain、cover
一个值表示整体缩放
两个值表示对应方向上分别缩放
contain 表示宽高有一个达到最大值则停止缩放
cover 整体覆盖缩放阴影系列
盒子阴影
box-shadow: 水平偏移 垂直偏移 模糊程度 阴影大小 颜色 内外阴影
阴影可以写多个文字阴影
text-shadow: 水平偏移 垂直偏移 模糊程度 颜色;案例: 凹凸效果
内减模式
自动减去padding和border值 不需要手动去减
box-sizing: border-box;
取值：
border-box 自动内减
content-box 手动内减过渡系列
过渡本质上不是动画，是css的某一个属性的值变换到另外一个值的过程
transition: 过渡的属性 过渡的时间 过渡的曲线 过渡的延迟时间- 案例：电商移动小案例
- 案例：精灵图背景移动小案例
- 案例：泡泡按钮
2D转换
移动
从一个位置移动至另外一个位置
transform: translate(X轴, Y轴);
移动的特点： 相当于相对定位，比定位的性能更高 可以接受负值小技巧：让一个盒子水平垂直居中
旋转
transform: rotate(360deg);tips:旋转的中心点可以控制 transform-origin: 值;
缩放
transform: scale();
取值是倍数案例：鼠标移上缩放案例
斜切
transform: skew(角度);案例 扫光效果
** 注意：多个2D效果需要采用连写的方式 **
多个2D效果共存
一个元素具备多个2D效果如何实现：采用连写的方式
transform: scale(2) rotate(360deg);一个元素多个场景下具备2D效果