背景边框PPT演示课件

第1页,第1页,第14章 背景和边框,本章概述 本章的学习目标主要内容,第2页,第2页,本章概述,CSS3对原有的盒模型功能也进行了完善。例如，增强了元素边框和背景样式的控制能力，新增了不少UI特性，即用户界面设置问题。本章将介绍CSS3中与背景和边框相关的一些样式，其中包括与背景相关的几个属性，以及如何在一个元素的背景中使用多个图像文件，如何绘制圆角边框，如何给元素添加图像边框。,第3页,第3页,本章的学习目标,掌握多色边框的设计方法；掌握设计边框背景的方法；掌握圆角效果的制作方法；掌握阴影的设置；掌握背景相关属性的使用。,第4页,第4页,主要内容,14.1 设计多色边框 14.2 设计边框背景14.3 设计圆角14.4 设计阴影14.5 设计背景14.6 本章小结,第5页,第5页,14.1 设计多色边框,14.1.1 用法详解14.1.2 案例实战,第6页,第6页,14.1.1 用法详解,border-colors属性的基本语法如下：-moz-border-top-colors:颜色值;-moz-border-right-colors:颜色值;-moz-border-bottom-colors:颜色值;-moz-border-left-colors:颜色值;,第7页,第7页,14.1.2 案例实战,详情见课文【例14-1】CSS3 border-colors实现多色边框。,第8页,第8页,主要内容,14.1 设计多色边框 14.2 设计边框背景14.3 设计圆角14.4 设计阴影14.5 设计背景14.6 本章小结,第9页,第9页,14.2 设计边框背景,14.2.1 border-image属性14.2.2 border-image绘制原理简述,第10页,第10页,14.2.1 border-image属性,border-image属性的最简单的使用方法如下：border-image:url(图像文件的路径) A B C D 平铺方式;其中，url用于指定背景图片；A、B、C、D四个参数表示当浏览器自动把边框使用到的图像进行分割时的上边距、右边距、下边距、左边距；平铺方式用于指定图片的平铺方式，有repeat（重复）、round（平铺）和stretch（拉伸）3种取值。,第11页,第11页,14.2.2 border-image绘制原理简述,（1）首先是调用边框图片：border-image的url属性，通过相对或绝对路径链接图片。（2）进行边框图片的剪裁：border-image的数值参数剪裁边框图片，形成九宫格。（3）接着剪裁图片填充边框：边框图片被切割成9部分，以一一对应的关系放到div边框的九宫格中，然后再压缩（或拉伸）至边框（border-width或border-image-width）的宽度大小。（4）执行重复属性：被填充至边框九宫格四个角落的的边框图片是不执行重复属性的。上下的九宫格执行水平方向的重复属性（拉伸或平铺），左右的格子执行垂直方向的重复属性，而中间的那个格子则水平重复和垂直方向的重复都要执行。（5）完成绘制，实现边框背景效果。,第12页,第12页,主要内容,14.1 设计多色边框 14.2 设计边框背景14.3 设计圆角14.4 设计阴影14.5 设计背景14.6 本章小结,第13页,第13页,14.3 设计圆角,14.3.1 border-radius属性14.3.2 border-radius属性值的4种写法14.3.3 border-radius画实心半圆和实心圆,第14页,第14页,14.3.1 border-radius属性,可以使用border-radius属性为元素添加圆角效果。语法格式如下：border-radius:长度值;其中，长度值可以是px、百分比、em等。,第15页,第15页,14.3.2 border-radius属性值的4种写法,与border、padding、margin等属性类似，圆角border-radius也有4种写法，分别如下。border-radius设置1个值,“border-radius:10px;”，表示4个角的圆角半径都是10px。border-radius设置2个值,“border-radius:10px 20px;”，表示左上角和右下角的圆角半径是10px，右上角和左下角的圆角半径都是20px。border-radius设置3个值，“border-radius:10px 20px 30px;”表示左上角圆角半径是10px，左下角和右上角圆角半径都是20px，右下角圆角半径是30px。border-radius设置4个值，“border-radius:10px 20px 30px 40px;”表示左上角、右上角、右下角和左下角的圆角半径依次是10px、20px、30px、40px。,第16页,第16页,14.3.3 border-radius画实心半圆和实心圆,制作上半圆，实现方法为：把高度（height）设为宽度（width）的一半，并且只设置左上角和右上角的圆角半径与元素的高度一致，而右下角和左下角的圆角半径设置为0。详情见【例14-4】绘制实心的上半圆。使用border-radius属性实现实心圆的方法为：把宽度（width）与高度(height)值设置为一致，也就是正方形，并且四个圆角值都设置为它们值的一半。详情见【例14-5】绘制实心圆。,第17页,第17页,主要内容,14.1 设计多色边框 14.2 设计边框背景14.3 设计圆角14.4 设计阴影14.5 设计背景14.6 本章小结,第18页,第18页,14.4 设计阴影,14.4.1 bax-shadow属性14.4.2 box-shadow兼容性处理14.4.2 案例实战,第19页,第19页,14.4.1 bax-shadow属性,box-shadow的使用语法如下：E box-shadow: ?|也就是：E box-shadow:inset x-offset y-offset blur-radius spread-radius color其中，E代表对象选择器，box-shadow代表阴影类型，x-offset为X轴偏移量，y-offset为Y轴偏移量，blur-radius为阴影模糊半径，spread-radius为阴影扩展半径，color为阴影的颜色。,第20页,第20页,14.4.2 box-shadow兼容性处理,为了兼容各主流浏览器并支持这些主流浏览器的较低版本，在基于Webkit的Chrome和Safari等浏览器上使用box-shadow属性时，需要做兼容性处理：.box-shadow -moz-box-shadow:投影方式 X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色; -webkit-box-shadow:投影方式 X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色; box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色; ,第21页,第21页,14.4.2 案例实战,【例14-6】制作简单的阴影效果。【例14-7】定义位移、阴影大小和阴影颜色。【例14-8】制作多色阴影。,第22页,第22页,主要内容,14.1 设计多色边框 14.2 设计边框背景14.3 设计圆角14.4 设计阴影14.5 设计背景14.6 本章小结,第23页,第23页,14.5 设计背景,14.5.1 background-image属性14.5.2 background-position属性14.5.3 background-size属性14.5.4 background-origin属性14.5.5 background-repeat属性14.5.6 background-clip属性14.5.7 background-attachment属性,第24页,第24页,14.5.1 background-image属性,background-image属性为元素设置背景图像。元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。默认情况下，背景图像位于元素的左上角，并在水平和垂直方向上重复。background-image属性的语法格式如下：background-image: url(图片路径);,第25页,第25页,14.5.2 background-position属性,background-position 属性设置背景图像的起始位置。这个属性设置背景原图像（由background-image定义）的位置，背景图像如果要重复，将从这一点开始。background-position属性的语法格式如下：background-position:起始位置;,第26页,第26页,14.5.3 background-size属性,background-size属性用于规定背景图像的尺寸，语法格式如下：background-size: length|percentage|cover|contain,第27页,第27页,14.5.4 background-origin属性,background-origin属性规定background-position属性相对于什么位置来定位。如果背景图像的background-attachment属性为fixed，则该属性不生效。background-origin属性的语法格式如下：background-origin: padding-box|border-box|content-box;,第28页,第28页,14.5.5 background-repeat属性,background-repeat属性定义了图像的平铺模式。该属性设置是否及如何重复背景图像。默认情况下，背景图像在水平和垂直方向上重复。需要注意的是，背景图像的位置是根据background-position属性设置的。如果未规定background-position属性，图像会被放置在元素的左上角。使用该属性的语法格式如下：background-repeat: 重复方式;,第29页,第29页,14.5.6 background-clip属性,background-clip属性用于规定背景的绘制区域。使用该属性的语法格式如下：background-clip: border-box|padding-box|content-box;,第30页,第30页,14.5.7 background-attachment属性,background-attachment属性用于设置背景图像是否固定或者随着页面的其余部分滚动。使用该属性的语法格式如下：background