第10章 背景、边框和渐变的相关属性.pptx

《第10章 背景、边框和渐变的相关属性.pptx》由会员分享，可在线阅读，更多相关《第10章 背景、边框和渐变的相关属性.pptx（20页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第第1010章章 背景、边框和渐变的相关属性背景、边框和渐变的相关属性内容简介内容简介 CSS 3具有非常强大的功能，它不仅使页面代码更加简洁、结构更加合理，而且使性能和效果都得到了更好的体现。上一章我们已经学习了CSS样式和选择器，本章将主要介绍CSS 3的背景、边框和渐变的相关属性，以及如何在一个元素中实现显示多个背景图像，如何设置图片的边框和绘制圆角边框等功能。本章学习要点本章学习要点p 掌握CSS 3中与背景样式有关的属性p 掌握CSS 3中与边框样式有关的属性p 掌握CSS 3中渐变最常用的属性p 了解CSS 3中与背景、边框和渐变的相关属性在各种浏览器的兼容情况p 熟练使用bord

2、er-radius属性绘制圆角边框p 掌握如何实现简单的线性渐变、径向渐变和重复渐变1background-size属性属性2background-clip属性属性3background-origin属性属性4background-break属性属性10.1 背景样式背景样式 背景（background）属性是CSS 3中使用频率最高的属性。在CSS 3中增加了一些与背景相关的属性，它们分别是background-size属性、background-clip属性、background-origin属性和background-break属性。在本节中主要学习这4种属性的用法。10.1.1 bac

3、kground-size属性属性 在CSS 2之前的版本中无法控制背景图像的样式，如果要完整的显示背景图像，则需要设计好背景图片的大小。在CSS 3中新增加的background-size属性可以用于指定背景图像的大小，很好的解决了之前的问题，使用户可以随意的控制背景图像的大小。background-size:auto|cover|contain background-size属性的语法如下所示：其中比较常用的参数值如下所示：auto 默认值，保持背景图像原有的宽度和高度length 由浮点数字和单位标识符组成的长度值。其单位为px，不能为负值percentage 百分值，可以是0%100%之

4、间的任何值，不可为负值cover 保持图像本身的宽度和高度，当图像小于容器又无法使用background-repeat来实现时，就可以使用cover将图像放大以铺满整个容器，但是这种方法会使背景图像失真contain 保持图像本身的宽度和高度，当图像大于容器而又需要将背景图片全部显示出来时，就可以使用contain将图像缩小到适合容器大小，但是这种方法也会使背景图像失真10.1.2 background-clip属性属性 在HTML页面中对于任何元素来说，它都会包含四个区域和边缘，即外部补白区域（margin）、边框区域（border）、补白区域（padding）和内容区域（content），

5、以及外部补白边缘、边框边缘、补白边缘和内容边缘。它们之间的关系如图1所示。在CSS 3中可以使用background-clip属性可以修改背景的显示范围或者背景的裁剪区域。background-clip属性的语法主要如下所示：background-clip：border-box|padding-box|content-box 其中比较常用的参数值如下所示：border-box 默认值，背景从border区域向外裁剪，超出border区域的背景被剪掉padding-box 背景从padding区域向外裁剪，超过padding区域的背景将被裁剪掉content-box 背景从content区域向外

6、裁剪，超过content区域的背景将被裁剪掉图110.1.3 background-origin属性属性 在CSS中如果要给图像定位，一般使用background-position属性，但是这个属性总是以元素的左上角为坐标原点进行图像定位。background-origin属性是用来指定绘制背景图像时的起点，使用此属性可以任意定位图像的起始位置。它的语法如下所示：background-origin属性是主要用来决定background-position计算的参考位置。如果是border值，则在border边缘显示；如果是padding值，则背景图像的位置在padding边缘显示；如果是cont

7、ent值，则背景图像会以内容边缘作为起点；多个背景图像对应的background-origin值使用逗号隔开。background-origin：border-box|padding-box|content-box 其中主要的参数如下所示：border-box 默认值，从border区域开始显示背景padding-box 从padding区域开始显示背景content-box 从content区域开始显示背景10.1.4 background-break属性属性 在CSS 3中可以使用background-break属性来指定平铺内联元素背景图像时的循环方式，它的主要参数值如下所示：bound

8、ing-box 背景图像在整个内联元素中进行平铺each-box 背景图像在每一行中进行平铺continuous 下一行中的图像紧接着上一行中的图像继续平铺 例如在HTML页面中添加div元素显示一段文字，然后使用background-break属性的不同的值来指定背景的循环方式。主要代码如下：span background-image:url(images/xiaohua.jpg);font-size:24px;font-weight:bold;line-height:1.5;div.img1 span -moz-background-inline-policy:bounding-box;d

9、iv.img2 span -moz-background-inline-policy:each-box;div.img3 span-moz-background-inline-policy:continuous;雨是最寻常的，一下就是三两天。可别恼，看，像牛毛，像花针，像细丝，密密地斜织着，人家屋顶上全笼着一层薄烟。树叶儿却绿得发亮，小草儿也青得逼你的眼。/*省略其他代码*/10.2 实现书架效果实现书架效果 在CSS 3中可以在同一个元素里添加多个背景图像，并且可以将多个背景图像进行重叠显示，这样有利于调整背景图像中所用的素材。本节将通过上一节所学的背景样式来实现在同一个元素中添加多个背景图

10、像的效果，从而实现书架展示效果的操作。在本示例中首先在HTML页面中添加div、ul和li元素，它们分别用来显示书架图书的列表内容，然后通过background-position、background-image和background-repeat等属性设置图片样式。最终效果如图2所示。图21border-color属性属性2border-image属性属性3border-radius属性属性10.3 边框样式边框样式 在CSS 2之前的版本中使用border属性只能设置纯色或者简单的线条（如solid、double、dashed等），而CSS 3中添加了新的边框样式，可以使用图片设置边框样式

11、和颜色，还可以添加阴影框，甚至可以实现创建圆角边框的功能。10.3.1 border-color属性属性 border-color属性可以用来设置边框的颜色，在CSS 3中border-color增加了许多功能，除了可以和CSS 2之前版本中的border-color属性混合使用外，还可以为边框设置更多的颜色，比如给边框添加渐变颜色或者显示边框的彩色效果。例如下面代码演示了border-color属性的简单使用：div.div1 width:500px;height:250px;border:35px solid;-moz-border-top-colors:#F00#F00#F00#F00#

12、F00#F90#F90#F90#F90#F90#FF0#FF0#FF0#FF0#FF0#0C0#0C0#0C0#0C0#0C0#9F0#9F0#9F0#9F0#9F0#09F#09F#09F#09F#09F#63F#63F#63F#63F#63F;/*省略颜色的其他相关代码*/div.div2 width:500px;height:250px;background-image:url(images/1002.jpg)在之前border-color属性的基础上，CSS 3中又增加了4种新的颜色属性。它们的具体说明如下：border-top-colors 定义元素顶部边框的颜色border-rig

13、ht-colors 定义元素右侧边框的颜色border-bottom-colors 定义元素底部边框的颜色border-left-colors 定义元素左侧边框的颜色10.3.2 border-image属性属性 CSS 3新增加的border-image属性功能非常强大，不仅解决了传统的使用背景图片设置边框样式的问题，减少了页面中的元素，还可以模拟实现background-image属性的功能。border-image:none|1,4 /1,4 /stretch|repeate|round0,2 border-image属性的语法如下：其中比较常用的参数如下所示：none 默认值，无背景图

14、image 使用相对或绝对路径定义背景图像number 用来设置边框宽度，就像border-width一样取值，可以设置1-4个值，表示上、右、下、左四个方向。其默认单位是pxpercentage 用来设置边框的宽度，主要是针对背景图像来说的。使用百分比表示stretch、repeat和round 可选属性，用来设置边框背景图片的铺放方式。stretch是默认值，表示拉伸，repeat是重复，round是平铺 border-image属性值中至少必须指定5个参数，其中第一个参数为边框所使用的图像文件路径，接下来4个参数表示当浏览器自动的把边框所使用到的图像进行分隔时的上边距、右边距、下边距和左

15、边距。10.3.3 border-radius属性属性 在CSS 2之前的版本中需要使用图像文件才能绘制圆角边框，而CSS 3新增加的border-radius属性只靠样式就能完成圆角边框的绘制。目前为止，Firefox浏览器、Opera浏览器和Chrome浏览器等都支持中种绘制圆角边框的属性，使用border-radius属性有下面几个的优点：减少维护的工作量提高网页的性能增加视觉的可靠性和美观度border-radius:none|1,4/1,4 border-radius属性的语法如下：order-radius是一种缩写的方法，如果“/”前后的值都存在，那么“/”前面的值设置其水平半径，

16、“/”后面的值设置垂直半径；如果没有“/”,表示水平半径和垂直半径相等。另外，设置的4个值是按照top-left、top-right，bottom-right和bottom-left的顺序来设置的。常见的形式如下所示：border-radius：1,4 只有一个值，表示4个方向的值相等border-radius：1,4 1,4 只有两个值，表示top-left和bottom-right的值相等，top-right和bottom-left的值相等border-radius：1,4 1,4 1,4 设置三个值，第一个值设置top-left，第二个值设置top-right和bottom-left并且

17、它们的值相等，第三个值设置bottom-rightborder-radius：1,4 1,4 1,4 1,4 表示4个不同方向的值10.4 相片背景设置边框相片背景设置边框 现在随着科技的进步，用手机就可以拍摄到很多自己满意的照片，可以通过自己的喜好给照片加上背景边框。10.3小节已经详细介绍过了CSS 3中新增加的与边框相关的3个属性，本节将使用这些属性设置相片背景。首先在HTML页面中添加div元素用来显示图片，然后设置该div元素的background-clip、background-origin、background-image以及border-radius属性等实现相片背景效果。其最

18、终运行效果如图3所示。图31线性渐变线性渐变2径向渐变径向渐变3重复渐变重复渐变10.5 渐变渐变 渐变是从一种颜色到另一种颜色的平滑过渡。在创建渐变的过程中可以指定多个中间颜色值，称为色标。每个色标包含一种颜色和一个位置，浏览器从每个色标的颜色淡出到下一个，以创建平滑的渐变。目前渐变主要包括线性渐变和径向渐变以及重复渐变。本节将主要学习这几种渐变的相关知识。10.5.1 线性渐变线性渐变 在线性渐变的过程中颜色沿着一条直线过度：从左侧到右侧、从顶部到底部或者沿着任意轴。要创建线性渐变需要指定方向、起始颜色、结束颜色以及希望沿着这条线添加的任何色标。浏览器负责剩余工作，通过绘制与渐变线垂直的颜

19、色线来填充整个元素。它生成从一种颜色到另一种颜色的平铺淡出，沿着所指定的方向渐变。-moz-linear-gradient(|,?,*)/Mozilla引擎-o-linear-gradient(|,?,*)/Opera引擎1.在Mozilla和Opera引擎下的一般应用 线性渐变的语法如下：语法中主要有3个参数：第1个参数定义线性渐变的方向，可以使用参数point和angle表示。参数point表示起始方向，默认属性值为top，top表示从上到下、left表示从左到右，如果定义为“left top”表示从左上角到右下角；参数angle定义渐变的角度，主要包括deg（度，1圈等于360deg）、

20、grad（梯度，90度等于100grad）、rad（弧度，1圈等于2*PI rad）。第2个参数表示起始颜色，第3个参数表示终点颜色。2.在Webkit引擎下的两种应用 在Webkit引擎下实现颜色渐变的功能的语法主要有2种。第一种语法类似于在Mozilla和Opera引擎下的基本语法，只需要将代码书写为“-webkit-linear-gradient”的形式。语法格式如下所示：-webkit-linear-gradient(|,?,*)/Webkit引擎10.5.1 线性渐变线性渐变 线性渐变在Webkit引擎下的第二种语法的代码如下所示：-webkit-gradient(type,x1 y

21、1,x2 y2,form(color value),to(color value),color-stop()*)Webkit引擎下的浏览器中，第2种语法参数的主要说明如下：type 表示渐变的类型，包括线性渐变（linear）和径向渐变（radial）x1 y1和x2 y2 表示颜色渐变体两个点的坐标。x1、y1、x2和y2的取值范围为0%100%，当它们取极值的时候，x1和x2可以取值left(或0%)或right(100%)，y1和y2可以取值top(0%)或bottom(或100%)form(color value)函数，表示渐变开始的颜色值to(color value)函数，表示渐变结

22、束的颜色值color-stop()定义颜色步长。color-stop()函数包含两个参数值，第一个参数值指定色标位置，可以是数值或百分比，取值范围为010（或者0%100%），第二个参数值指定任意的颜色值。一个渐变可以包含多个色标。如下示例代码演示了如何绘制一条简单的线性渐变：div background:-webkit-gradient(linear,40%30%,60%70%,from(#FFF),to(#000),color-stop(50%,#666),color-stop(50%,#333);10.5.2 径向渐变径向渐变 径向渐变是圆形或者椭圆形渐变。颜色不在沿着一条直线轴变化，而

23、是从一个起点朝所有方向混合。moz-radial-gradient(|,?|,?,*)-o-radial-gradient(|,?|,?,*)1.在Mozilla和Opera引擎下的一般应用 径向渐变的语法如下：-webkit-radial-gradient(|,?|,?,*)2.在Webkit引擎下的两种应用 上节介绍线性渐变的时候，我们学习过Webkit引擎浏览器下线性渐变的两种语法应用，本节介绍在Webkit引擎下径向渐变的两种不同的用法。第1种语法类似于在Mozilla和Opera引擎下的基本语法，只需要将代码书写为“-webkit-radial-gradient”的形式。语法格式如下

24、所示：第2种语法可以定义渐变的类型为线性渐变（linear）和径向渐变（radial）。但是相对于线性渐变来说，径向渐变稍微复杂。另外，使用“-webkit-gradient”属性不仅可以定义渐变背景，还可以定义渐变边框、填充内容、以及设计图标等。10.5.3 重复渐变重复渐变 如果需要创建一种在一个元素的背景上重复的渐变“模式”。虽然可以通过重复背景图像（使用background-repeat）创建线性重复渐变，但是没有创建重复的径向渐变的类似方式。在CSS 3中通过repeating-linear-gradient和repeating-radial-gradient语法实现了重复渐变的功能

25、。例如在HTML页面中添加两个div元素，然后分别实现重复线性渐变和重复径向渐变的效果。主要代码如下：#div1 background:-webkit-repeating-linear-gradient(125deg,#f90,#f90 5px,#fc6 5px,#fc6 10px);background:-moz-repeating-linear-gradient(125deg,#f90,#f90 5px,#fc6 5px,#fc6 10px);background:-o-repeating-linear-gradient(125deg,#f90,#f90 5px,#fc6 5px,#fc6

26、 10px);#div2 background:-webkit-repeating-radial-gradient(center,circle,#f90,#f90 5px,#fc6 5px,#fc6 10px);background:-moz-repeating-radial-gradient(center,circle,#f90,#f90 5px,#fc6 5px,#fc6 10px);background:-o-repeating-radial-gradient(center,circle,#f90,#f90 5px,#fc6 5px,#fc6 10px);10.6 设计填充内容效果设计填充内容效果 现在随着DIY的越来越流行，用户们越来越喜爱自己动手做东西，当然对于某个模块的填充内容也不例外。前面已经介绍过关于渐变的相关知识，本节主要使用CSS 3中的渐变实现设计填充内容的效果。例如在HTML页面中添加div元素用来实现渐变的效果，然后为该div元素添加样式，border-shadow设计阴影样式，border-radius设计边框圆角样式，webkit-gradient设计渐变效果。页面最终运行效果如图4所示。图4