HTML5+CSS3-第五节（边框背景图、多背景图、CSS选择器、网络字体、边框背景图片、过渡、放大、旋转）

边框背景图片@H_618_6@

1、  BACkground-origin@H_618_6@：@H_618_6@设置背景图片的起始原点

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@H_618_6@：@H_618_6@将背景图片做适当的裁剪以适应实际需要

BACkground- clip:border-Box;------背景图片从边框开始向外裁剪背景

BACkground- clip:padding-bax;-----背景图片从内边距开始向外裁剪背景

BACkground- clip:content-Box;------背景图片从内容区域开始向外裁剪背景

BACkground-clip:no-clip;------表示不裁切

 

多背景图@H_618_6@

1、  多个背景：(中间用逗号隔开)

语法：

BACkground:url(图像位置) 重复方式,url(图像位置1) 依附方式1,url(图像位置3) 依附方式3…………………..

2、  BACkground-size:------------图像大小

大小分为：像素--

                   百分比

                   Cover------覆盖，以最小边等比例缩放

                   Contain-------包含，----以最长边等比例缩放

注意：像素和百分比的缺点：图片变形

         Cover和contain的缺点：图片超出范围或者显示不全

 

加上之前的：简写为：

BACkground:背景颜色 图片路径 重复方式 依附方式 位置/图像大小；

注意：位置/图像大小，这两个不可以互换

 

CSS@H_618_6@选择器@H_618_6@

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、  伪对象选择器

 

开放的网络字体类型@H_618_6@

语法：

@font-face{

         Font-family:字体名称;

         Src:url(字体文件路径);

}

 

边框背景图片@H_618_6@

语法：

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。并且不加谷歌的私有前缀，加上之后边框中间会平铺图片中间的图

 

媒体查询@H_618_6@

1、  @H_618_6@过渡@H_618_6@----@H_618_6@加私有前缀@H_618_6@

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,BACkground 2s;

         }

2、  @H_618_6@放大@H_618_6@

Transform:scale(0.5,2);--------0.5为x轴，2为y轴（大于1的为放大，小于1 的为缩小）

3、  @H_618_6@旋转@H_618_6@

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;

         }