关闭

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

817人阅读 评论(0) 收藏 举报

边框背景图片

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;

         }

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:74117次
    • 积分:1632
    • 等级:
    • 排名:千里之外
    • 原创:89篇
    • 转载:19篇
    • 译文:0篇
    • 评论:2条