计算机文化

Size: px

Start display at page:

Download "计算机文化"

钦堡宁
4 years ago
Views:

1 1 Web 前端开发技术与实践第 11 章 : 背景与边框阮晓龙 / rxl@hactcm.edu.cn 河南中医学院管理信息工程学科河南中医学院网络信息中心

2 2 本章主要内容背景属性边框属性案例 : 图片轮转的实现案例 : 网页课程表的实现

3 3 1. 背景属性 1.1 基本属性背景的相关属性是用于控制元素背景色背景图片等, 同时可以设置背景图片的排列方式背景的基本属性主要用于定义背景的色彩图片重复方式等基本内容

4 4 1. 背景属性 1.1 基本属性 background-color background-color 属性用于设置元素的背景颜色它的默认值取值为 none, 允许下面的任何内容显示出来 background-color 属性和 color 属性一样支持多种颜色格式

5 5 1. 背景属性 1.1 基本属性 background-image background-image 属性可以为元素指定背景图像如果图像包括透明区域, 下面的内容将会显示出来为防止这一点, 网页设计者通常将 background-image 属性和 background-color 属性一起使用背景颜色显示在背景图像下面, 提供了不透明的背景 background-image 属性需要一个 URL 来选择作为背景的相应图像用作背景图像的图片类型可以为浏览器支持的任何格式, 通常为 GIF JPG 和 PNG 格式

6 6 1. 背景属性 1.1 基本属性 background-repeat background-repeat 属性决定当背景图像比元素的空间小时将如何排列该属性的默认值为 repeat, 这将让图像在水平和垂直两个方向上平铺当该属性取值为 repeat-x 时, 背景图像将仅在水平上平铺当该属性取值为 repeat-y 时, 背景图像将仅在垂直方向上平铺当该属性取值为 no-repeat 时, 背景图像将不会平铺

7 7 1. 背景属性 1.1 基本属性 background-attachment background-attachment 属性决定背景图像在元素的内容进行相应滚动时是应该滚动还是应该停留在屏幕的一个固定位置这个属性的默认值取值为 scroll 当取值为 fixed 时, 可实现水印效果, 这和 <body> 元素的专有属性 bgproperties( 由 Microsoft 引入 ) 相似

8 8 1. 背景属性 1.1 基本属性 background-position background-position 属性指定背景图像, 在元素的画布空间中的定位方式有三种方法指定位置 : 为图像的左上角指定一个绝对距离, 通常以像素为单位可以使用水平和垂直方向的百分比来指定位置可以使用关键字来描述水平和垂直方向的位置水平方向上的关键字为 left center 和 right 垂直方向上的关键字为 top center 和 bottom 在使用关键字时, 未指明的方向上默认的取值为 center

9 9 1. 背景属性 1.1 基本属性

10 10 1. 背景属性 1.1 基本属性 background-position 具体语法如下 : 注意 : 如果仅仅设置了一个关键字, 那么第二个关键字将取默认值 center 因此, 在上面的例子中, 关键字 center 只需用一次即可

11 11 1. 背景属性 1.1 基本属性 background background 属性用于全面设置背景样式该属性是一个复合属性, 可用于同时设置背景色背景图片背景重复模式等为更好地控制背景, 一般不建议通过该属性来控制背景具体语法如下 :

12 12 1. 背景属性 1.2 CSS3 新增背景属性 CSS3 新增的背景属性 :

13 13 1. 背景属性 1.2 CSS3 新增背景属性 background-clip 在 HTML 页面中, 具有背景的元素通常有元素内容内部补白 (padding) 边框外部补白 (margin) 四部分组成元素背景的显示范围在 CSS2 与 CSS2.1 CSS3 中并不相同在 CSS2 中, 背景的显示范围是指内部补白之内的范围, 不包括边框在 CSS2.1 和 CSS3 中, 背景的显示范围是指包括边框在内的范围在 CSS3 中, 也可以使用 background-clip 来修饰背景的显示范围如果将 background-clip 的属性值设定为 border, 则背景范围包括边框区域, 如果设定为 padding, 则不包括边框区域

14 14 现场演示 : 案例 11-01: 两种 background-clip 属性值的对比

15 15 1. 背景属性 1.2 CSS3 新增背景属性 background-origin 在绘制背景图像时, 默认是从内部区域 (padding) 的左上角开始, 但是可以利用 background-origin 属性来指定绘制时从边框的左上角开始, 或者从内容的左上角开始在 Firefox 浏览器中指定绘制起点时, 需要在样式代码中将 background-origin 属性书写成 -moz-background-origin 的形式 ; 在 Safari 浏览器或者 Chrome 浏览器中指定绘制起点时, 需要在样式代码中将 background-origin 属性写成 -webkit-backgroundorigin 的形式

16 16 现场演示 : 案例 11-02:background-origin 属性

17 17 1. 背景属性 1.2 CSS3 新增背景属性 background-size 在 CSS3 中, 可以使用 background-size 属性来指定背景图像的尺寸使用 background-size 属性来指定背景图像尺寸的最简单的方法类似如下所示 : 其中,40px 为背景图像的宽度,20px 为背景图像的高度, 中间用半角空格进行分隔如果要维持图像比例的话, 可以设定图像宽度与高度的同时, 将另一个参数设定为 auto

18 18 现场演示 : 案例 11-03:background-size 属性

19 19 1. 背景属性 1.3 多背景 CSS3 多背景语法及参数 CSS3 多背景语法和 CSS 中背景语法其实没有本质上的区别, 只是在 CSS3 中可以给多个背景图像设置相同或者不相同的 background- (position repeat clip size origin attachment) 属性在 CSS3 多背景中, 相邻背景之间必须使用逗号分隔开

20 20 1. 背景属性 1.3 多背景 CSS3 多背景语法及参数具体语法如下 : 可以把上面的缩写拆解成以下形式 :

21 21 现场演示 : 案例 11-04: 多背景属性使用

22 22 1. 背景属性 1.3 多背景 CSS3 多背景的优势使设计师部分摆脱了对 Adobe Photoshop 等绘图工具的依赖具有 CSS 3 多背景的层次之分可单独指定背景图像中某个图像的平铺方式图像的大小以及位置可图片合成, 代码易于维护

23 23 1. 背景属性 1.4 渐变背景线性渐变渐变是通过背景设置的, 所以必须使用 background 或 backgroundimage 属性具体语法如下 : linear-gradient() 函数的属性规定了创建渐变效果的开始位置与颜色第一个值可以是像素值百分比或使用关键字 top bottom left 和 right 开始位置可以用角度替换, 指定渐变效果的方向基本语法如下 : 可以声明各种颜色的结束位置基本语法如下 :

24 24 现场演示 : 案例 11-05: 线性渐变属性

25 25 1. 背景属性 1.4 渐变背景放射渐变放射渐变的使用方法与前一方法相似

26 26 现场演示 : 案例 11-06: 放射渐变属性

27 27 2. 边框属性 2.1 基本属性

28 28 2. 边框属性 2.1 基本属性

29 29 2. 边框属性 2.1 基本属性 border-style border-style 属性用来设置边框的显示外观它默认的取值为 none, 即没有边框具体语法 :

30 30 2. 边框属性 2.1 基本属性 border-width 可通过 border-top-width border-right-width border-leftwidth border-bottom-width 分别设置边框的宽度也可通过 border-width 属性对全部边框进行设置 border-width 属性可分别赋 1-4 个值, 多个值按照顺时针方向应用到顶部右边底部左边的边框边框的宽度可以使用像素值和关键字来指定, 关键字允许为 thin,medium 和 thick 具体语法如下 :

31 31 2. 边框属性 2.1 基本属性 border-color 通过 border-color 属性可以为边框指定颜色指定边框颜色时可以使用支持的颜色英文名称数字的 RGB 颜色规范十六进制色彩值 border-color 属性可以分别赋 1-4 个值, 多个值按照顺时针方向应用到顶部右边底部左边的边框也可以通过 border-topcolor border-right-color border-bottom-color borderleft-color 为各边框单独设置颜色值具体语法如下 :

32 32 2. 边框属性 2.1 基本属性 border 属性快速设置 border 属性允许使用组合属性值对边框的宽度颜色风格等进行设置, 也可通过 border-top border-right border-bottom border-left 属性使用组合属性值对单一边框的宽度颜色风格等进行设置

33 33 现场演示 : 案例 11-07: 边框基本属性

34 34 2. 边框属性 2.2 CSS3 新增边框属性 CSS3 新增的边框属性具有强大的生命力, 灵活使用这些属性可以设计很多优美精巧的 UI 界面效果 CSS3 增加了圆角边框 (border-radius) 图片边框 (borderimage) 渐变边框阴影 (box-shadow)

35 35 2. 边框属性 2.3 圆角边框在 border-radius 属性中指定两个半径具体语法如下 : 针对这种情况, 各种浏览器的处理方式并不一致在 Chrome 浏览器和 Safari 浏览器中, 会绘制出一个椭圆形边框, 第一个半径为椭圆的水平方向半径, 第二个半径为椭圆的垂直方向半径在 Firefox 浏览器与 Opera 浏览器中, 将第一个半径作为边框左上角与右下角的圆半径来绘制, 将第二个半径作为边框左下角与右上角的圆半径来绘制

36 36 现场演示 : 案例 11-08: 在 border-radius 属性中指定两个半径

37 37 2. 边框属性 2.3 圆角边框不显示边框如使用 border-radius 属性但把边框设定为不显示时, 浏览器将把背景的四个角绘制为圆角

38 38 现场演示 : 案例 11-09: 不显示边框的使用

39 39 2. 边框属性 2.3 圆角边框修改边框种类使用 border-radius 属性后, 不管边框是什么种类, 都会将边框沿着圆角曲线进行绘制

40 40 现场演示 : 案例 11-10: 修改边框种类

41 41 2. 边框属性 2.3 圆角边框绘制四个不同半径的圆角边框可以通过分别定义 border-top-left-radius border-top-rightradius border-bottom-right-radius border-bottom-leftradius 属性值, 分别定义边框四个圆角半径

42 42 现场演示 : 案例 11-11: 绘制四个不同半径的圆角边框

43 43 2. 边框属性 2.4 图片边框 border-image border-image 具体语法 : 参数的含义与使用方法 : none: 默认值, 表示边框无背景图片 <image>: 设置背景图片, 这跟 background-image 一样, 可以使用绝对或相对的 URL 地址, 来指定边框的背景图片 <number>:number 是一个数值, 用来设置边框或者边框背景图片的大小, 其单位是像素 (px), 可以使用 1-4 个值, 表示 4 个方位的值

44 44 2. 边框属性 2.4 图片边框 border-image 参数的含义与使用方法 : <percentage>:percentage 也是用来设置边框或者边框背景图片的大小, 和 number 不同之处是,percentage 使用的是百分比 stretch repeat round: 这三个属性参数是用来设置边框背景图片的铺放方式, 类似于 background-position 其中 stretch 会拉伸边框背景图片 ;repeat 会重复边框背景图片 ;round 会平铺边框背景图片, 其中 stretch 为默认值

45 45 2. 边框属性 2.4 图片边框 border-image 为了便于理解, 暂把 border-image 在语法的表达式形式进行属性的分解阐述 ( 实际应用中是不能分解的 ), 分解后变成以下四个部分 : 引入背景图片 :border-image-source 切割引入背景图片 :border-image-slice 边框图片的宽度 :border-image-width 边框背景图片的排列方式 :border-image-repeat

46 46 2. 边框属性 2.4 图片边框 border-image-source border-image-source 具体语法 : border-image-source 和 CSS 2 中的 background-image 属性相似, 也是通过 url() 来调用背景图片, 图片的路径可以是相对地址, 也可以是绝对地址, 其默认值为 none

47 47 2. 边框属性 2.4 图片边框 border-image-slice border-image-slice 具体语法 : border-image-slice 是用来分解引入的背景图片, 这个参数相对来说比较复杂, 主要有以下几个方面 : 取值支持 <number> <percentage> 其中 number 是没有单位的, 因为其默认值的单位就是像素除了直接用 number 来设置外, 还可以使用百分比值来表示, 即相对于边框背景图片而言的

48 48 2. 边框属性 2.4 图片边框 border-image-slice border-image-slice 是用来分解引入的背景图片, 这个参数相对来说比较复杂, 主要有以下几个方面 : 例如, 边框图片的大小是 300px*240px, 取百分比为 25%,30%,15%, 20%, 实际相对应的效果就是剪切了图片的 60px,90px,36px,60px 的四边大小 border-image-slice 中的 number 或者 percentage 都可以取 1-4 个值, 这个类似于 CSS 2 中的 border-width 的取值方式, 遵循 top right bottom left 的规则 fill 从字面上说就是填充的意思, 如果使用这个关键字时, 图片边界的中间部分将保留下来, 默认情况下为空

49 49 2. 边框属性 2.4 图片边框 border-image-slice border-image-slice 是用来分解引入的背景图片, 这个参数相对来说比较复杂, 主要有以下几个方面 : 剪切的特性 (slice) 在 border-image 中 slice 是一个关键部分, border-image-slice 虽然表面上说不是剪切, 但实际应用中就是一种纯粹的剪切, 把取到的边框图片切成九份, 再像 background-image 一样重新布置 ( 如图 1 所示 ), 在该图中,border-image-slice 属性在距边框背景图片的 top right bottom left 四边的 18px 分别切了一刀, 这样一来就把背景图片切成了九个部分, 称为九宫格 ( 如图 2 所示 ), 分割后的图像在 CSS 3 中的名称如表所示

50 50 图 1 浏览器对于图像文件的分割图 2 A B C D 四个参数

51 51

52 52 2. 边框属性 2.4 图片边框 border-image-slice border-top-right-image border-bottom-right-image borderbottom-left-image 以及 border-top-left-image 四个边角部分, 在 border-image 中是没有任何展示效果的, 把这四个部分称为盲区 border-top-image border-right-image border-bottom-image 以及 border-left-image 属于展示效果区域其中上下区域 bordertop-image 和 border-bottom-image 区域受到水平方向效果影响, border-right-image 和 border-left-image 区域受到垂直方向效果影响

53 53 现场演示 : 案例 11-12: 水平 round 效果案例 11-13: 水平 repeat 效果案例 11-14: 水平 stretch 效果案例 11-15: 垂直 round 效果案例 11-16: 垂直 repeat 效果

54 54 2. 边框属性 2.4 图片边框通过上面几个案例比较可知 : repeat 属性是边框中间向两端不断平铺, 在平铺的过程中保持边框背景图片切片的大小, 这样就造成了图示中的两端边缘处有被切的现象 ; round 属性则会对边框背景图的切片进行压缩 ( 拉伸 ) 来适应边框宽度大小进行排列, 使其正好显示在区域内 ; stretch 属性只会把相应的切片进行拉伸, 适应边框的大小

55 55 2. 边框属性 2.4 图片边框 border-image-width border-image-width 具体语法 : 该属性用来设置边框背景图片的显示大小, 其实也可以理解为 border-width, 虽然 W3C 定义了 border-image-width 属性, 但各浏览器还是将其视为 border-width 来用, 也就是 border-image-width 属性用法和 border-width 属性用法一样

56 56 2. 边框属性 2.4 图片边框 border-image-repeat border-image-repeat 具体语法 : 该属性用来指定边框背景图片的排列方式, 默认值为 stretch 这个属性设置参数和其他属性不同,border-image-repeat 不遵循 top right bottom left 的方位原则, 只接受两个 ( 或一个 ) 参数值, 第一个值表示水平方向上的排列方式, 第二个值表示垂直方向上的排列方式当取一个值时, 表示水平和垂直方向上的排列方式相同如果不设置任何值时, 水平和垂直方向上都会以默认值 stretch 方式进行排列, 如图 3 所示

57 57 图 3 背景图片平铺方式

58 58 2. 边框属性 2.5 渐变边框 CSS3 提供了 4 个属性来支持渐变边框, 但这 4 个属性目前只有 Firefox 浏览器能够支持 : border-top-colors: 该属性用于设置目标组件上边框颜色如果设置上边框的宽度是 Npx, 那么就可以为该属性设置 N 种颜色, 每种颜色显示 1px 的宽度但如果设置的颜色数量小于边框的宽度, 那么最后一个颜色将会覆盖该边框剩下的宽度 border-right-colors: 该属性用于设置目标组件的右边框颜色该属性指定多个颜色值的意义与 border-top-colors 属性里各颜色值的意义相同

59 59 2. 边框属性 2.5 渐变边框 CSS3 提供了 4 个属性来支持渐变边框, 但这 4 个属性目前只有 Firefox 浏览器能够支持 : border-bottom-colors: 该属性用于设置目标组件的下边框颜色该属性指定多个颜色值的意义与 border-top-colors 属性里各个颜色值的意义相同 border-left-colors: 该属性用于设置目标组件的左边框颜色该属性指定多个颜色值的意义与 border-top-colors 属性里各个颜色值的意义相同

60 60 现场演示 : 案例 11-17: 渐变边框

61 61 2. 边框属性 2.6 盒子阴影语法 box-shadow 具体语法 : box-shadow 属性可以使用一个或多个投影, 如果使用多个投影时必须使用逗号, 隔开 box-shadow 参数的具体内容 : none: 默认值, 元素没有任何阴影效果 inset: 阴影类型, 可选值如果不设置, 其默认的投影方式是外阴影 ; 如果取其唯一值 inset, 就是给元素设置内阴影

62 62 2. 边框属性 2.6 盒子阴影语法 box-shadow 参数的具体内容 : x-offset: 阴影水平偏移量, 其值可以是正负值其值取正值, 则阴影在元素右边 ; 取负值, 则阴影在元素的左边 y-offset: 阴影垂直偏移量, 其值可以是正负值其值取正值, 则阴影在元素底部 ; 取负值, 阴影在元素的顶部 blur-radius: 阴影模糊半径, 可选参数其值只能是正值, 如果取值为 0 时, 表示阴影不具有模糊效果, 取值越大, 阴影的边缘就越模糊

63 63 2. 边框属性 2.6 盒子阴影语法 box-shadow 参数的具体内容 : spread-radius: 阴影扩展半径, 可选参数其值可以是正负值, 取值为正值, 则整个阴影都延展扩大 ; 取负值, 则整个阴影都缩小 color: 阴影颜色, 可选参数如果不设定任何颜色时, 浏览器会取默认色, 但各浏览器默认色不一样, 特别是在 webkit 内核下的浏览器将无色, 也就是透明

64 64 2. 边框属性 2.6 盒子阴影应用和 Adobe Photoshop 软件制作图片相比,box-shadow 修改元素阴影效果要方便得多, 因为 box-shadow 可以修改六个参数, 从而得到不同的效果单边阴影效果从下面案例中分析单边阴影效果

65 65 现场演示 : 案例 11-18: 单边阴影效果

66 66 2. 边框属性 2.6 盒子阴影应用四边相同阴影效果 box-shadow 给元素设置相同的四边阴影效果, 其实分为两种 : 只设置阴影模糊半径和阴影颜色只设置扩展半径和阴影颜色从案例中进行分析只设置阴影模糊半径和阴影颜色与只设置扩展半径和阴影颜色的效果

67 67 现场演示 : 案例 11-19: 设置相同四边阴影效果 ( 只设置阴影模糊半径和阴影颜色 ) 案例 11-20: 设置相同四边阴影效果 ( 只设置扩展半径和阴影颜色 )

68 68 现场演示 : 案例 11-21: 内阴影效果

69 69 2. 边框属性 2.6 盒子阴影应用图片内阴影效果 box-shadow 的 inset 内阴影直接运用在图片 img 元素上是没有任何效果的只有在 img 外添加一个容器便签, 例如 div 便签, 不将 img 转换成 div 便签的背景, 只是将 box-shadow 的内阴影使用在 div 标签上, img 才会出现内阴影效果

70 70 现场演示 : 案例 11-22: 图片内阴影效果

71 71 2. 边框属性 2.6 盒子阴影应用多层阴影前几种都是单阴影效果的使用, 其实 box-shadow 可以和多层阴影同时使用, 每层阴影之间用逗号, 隔开制作多层阴影效果时, 不设置模糊半径, 只设置扩展半径, 并配合多个阴影颜色, 还可以制作多色边框效果使用多层级 box-shadow 制作多色边框效果需要注意阴影的顺序, 最先写的阴影将显示在最顶层如果前面的阴影太大, 顶层的阴影就会遮盖底部的阴影

72 72 现场演示 : 案例 11-23: 多层阴影效果案例 11-24: 使用 box-shadow 制作多色边框效果

73 73 2. 边框属性 2.6 盒子阴影优势从实现盒子阴影来说,box-shadow 是最方便的, 不论是使用背景图片, 还是使用滤镜或 JavaScript, 都无法与 box-shadow 属性相比 box-shadow 具有多个属性参数可选, 能制作出圆润平滑的阴影效果代码维护方便, 可以随时更改参数来实现效果和更新

74 74 现场演示 : 案例 11-25: 制作 3D 搜索表单

75 75 2. 边框属性 2.6 盒子阴影浏览器兼容性目前 box-shadow 属性得到各种浏览器的支持,IE 8 及以前版本的浏览器不支持 box-shadow 属性, 在现代浏览器的新版本中无需加各浏览器的前缀考虑到向前兼容的需求,Firefox 下需要添加 -moz-,chrome 4-9 和 Safari 浏览器中需要添加 - webkit- 虽然 IE 浏览器低版本不支持这个属性, 但目前 box-shadow 在实际项目运用越来越普遍因为 box-shadow 实现阴影比使用背景图片的方法方便, 同时能为 Web 前端开发减少很多时间, 维护也方便要兼容 IE 浏览器低版本, 可以使用 IE 的滤镜来模拟实现

76 76 3. 案例 : 图片轮转的实现效果图 : POP 图片轮转

77 77 现场演示 : 案例 11-26: 图片轮转的实现

78 78 4. 案例 : 网页课程表的实现效果图 : 我的课程表

79 79 现场演示 : 案例 11-27: 网页课程表的实现

80 80

5-1 nav css 5-2

5 HTML CSS HTML CSS Ê Ê Ê Ê 5-1 nav css 5-2 5-1 5 5-1-1 5-01 css images 01 index.html 02 5-3 style.css css 03 CH5/5-01/images 04 images index.html style.css 05