边框背景图片
1、 background-origin：设置背景图片的起始原点
background-origin:border-box;------背景图片从边框开始显示
background-origin:padding-bax;-----背景图片从内边距开始显示（默认）
background-orign:content-box;------背景图片从内容区域开始显示
例子：
.div1{
width:500px;
height:300px;
border:30px solidred;
background:url(nimg269_1.jpg)no-repeat;
background-origin:border-box;
}
2、 background-clip：将背景图片做适当的裁剪以适应实际需要
background- clip:border-box;------背景图片从边框开始向外裁剪背景
background- clip:padding-bax;-----背景图片从内边距开始向外裁剪背景
background- clip:content-box;------背景图片从内容区域开始向外裁剪背景
background-clip:no-clip;------表示不裁切
多背景图
1、 多个背景：(中间用逗号隔开)
语法：
Background:url(图像位置) 重复方式, url(图像位置1) 依附方式1, url(图像位置3) 依附方式3…………………..
2、 Background-size:------------图像大小
大小分为：像素--
百分比
Cover------覆盖，以最小边等比例缩放
Contain-------包含，----以最长边等比例缩放
注意：像素和百分比的缺点：图片变形
Cover和contain的缺点：图片超出范围或者显示不全
加上之前的：简写为：
Background:背景颜色 图片路径 重复方式 依附方式 位置/图像大小；
注意：位置/图像大小，这两个不可以互换
CSS选择器
1、 关系选择器：
（1）包含选择器
例子：.div1 p{}----指的是div1下的所有p元素
（2）子选择器
例子：.div1>p{}------指的是div1下的子元素p
（3）相邻选择器
例子：.div1+p{}------div1下面相邻的p元素(一条)
（4）兄弟选择器
例子：.div1~p{}----- div1下的所有p元素
2、 伪类选择器
（1）结构性伪类选择器
（2）UI元素状态伪类选择器
3、 属性选择器
4、 伪对象选择器
开放的网络字体类型
语法：
@font-face{
Font-family:字体名称;
Src:url(字体文件路径);
}
边框背景图片
语法：
border-image:url(文件路径) 上边框切片的大小 右边框切片的大小 下边框切片的大小 左边框切片的大小repeat streatch;
分开写：
border-image-repeat:stretch;-----拉伸;
border-image-repeat:repeat;-----重复;
border-image-repeat:round;-----平铺;
例子：
.div4{
margin-top:200px;
width:400px;
height:400px;
background-color:darkred;
border:20pxsolid pink;
border-image:url(border.jpg)70 70 70 70 stretch round ;
}
注意：其中大小，不加px。并且不加谷歌的私有前缀，加上之后边框中间会平铺图片中间的图
媒体查询
1、 过渡----加私有前缀
Transition:width 2s,height 2s,background2s;
如果时间都一样，则用：
Transition:all 2s;
例子：
.div1{
width:200px;
height:100px;
background-color:blue;
border:1pxsolid black;
-webkit-transition:width2s, height 3s,background 2s;
-moz-transition:width2s, height 3s,background 2s;
}
2、 放大
Transform:scale(0.5,2);--------0.5为x轴，2为y轴（大于1的为放大，小于1 的为缩小）
3、 旋转
Transform-origin:left top;------------旋转的起始点，可以为像素，中心点为center
transform:rotate(60deg);----------旋转的度数，正数为顺时针；负数为逆时针
例子：实现一个正方形，鼠标经过5s之后成为一个圆
代码：
.div5{
width:200px;
height:200px;
background-color:red;
border:1pxsolid black;
margin:100px0px;
}
.div5:hover{
-webkit-transition:all5s;---------过渡时间
-webkit-transform:rotate(750deg);---------旋转
border-radius:100px;
}
