边框背景图片
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;
}