背景、边框和渐变的相关属性课件_第1页
背景、边框和渐变的相关属性课件_第2页
背景、边框和渐变的相关属性课件_第3页
背景、边框和渐变的相关属性课件_第4页
背景、边框和渐变的相关属性课件_第5页
已阅读5页，还剩15页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第10章背景、边框和渐变的相关属性内容简介

CSS3具有非常强大的功能，它不仅使页面代码更加简洁、结构更加合理，而且使性能和效果都得到了更好的体现。上一章我们已经学习了CSS样式和选择器，本章将主要介绍CSS3的背景、边框和渐变的相关属性，以及如何在一个元素中实现显示多个背景图像，如何设置图片的边框和绘制圆角边框等功能。本章学习要点掌握CSS3中与背景样式有关的属性掌握CSS3中与边框样式有关的属性掌握CSS3中渐变最常用的属性了解CSS3中与背景、边框和渐变的相关属性在各种浏览器的兼容情况熟练使用border-radius属性绘制圆角边框掌握如何实现简单的线性渐变、径向渐变和重复渐变1background-size属性2background-clip属性3background-origin属性4background-break属性10.1背景样式背景（background）属性是CSS3中使用频率最高的属性。在CSS3中增加了一些与背景相关的属性，它们分别是background-size属性、background-clip属性、background-origin属性和background-break属性。在本节中主要学习这4种属性的用法。10.1.2background-clip属性在HTML页面中对于任何元素来说，它都会包含四个区域和边缘，即外部补白区域（margin）、边框区域（border）、补白区域（padding）和内容区域（content），以及外部补白边缘、边框边缘、补白边缘和内容边缘。它们之间的关系如图1所示。在CSS3中可以使用background-clip属性可以修改背景的显示范围或者背景的裁剪区域。background-clip属性的语法主要如下所示：background-clip：border-box|padding-box|content-box其中比较常用的参数值如下所示：border-box默认值，背景从border区域向外裁剪，超出border区域的背景被剪掉padding-box背景从padding区域向外裁剪，超过padding区域的背景将被裁剪掉content-box背景从content区域向外裁剪，超过content区域的背景将被裁剪掉图110.1.3background-origin属性在CSS中如果要给图像定位，一般使用background-position属性，但是这个属性总是以元素的左上角为坐标原点进行图像定位。background-origin属性是用来指定绘制背景图像时的起点，使用此属性可以任意定位图像的起始位置。它的语法如下所示：

background-origin属性是主要用来决定background-position计算的参考位置。如果是border值，则在border边缘显示；如果是padding值，则背景图像的位置在padding边缘显示；如果是content值，则背景图像会以内容边缘作为起点；多个背景图像对应的background-origin值使用逗号隔开。background-origin：border-box|padding-box|content-box其中主要的参数如下所示：border-box默认值，从border区域开始显示背景padding-box从padding区域开始显示背景content-box从content区域开始显示背景10.1.4background-break属性在CSS3中可以使用background-break属性来指定平铺内联元素背景图像时的循环方式，它的主要参数值如下所示：bounding-box背景图像在整个内联元素中进行平铺each-box背景图像在每一行中进行平铺continuous下一行中的图像紧接着上一行中的图像继续平铺例如在HTML页面中添加div元素显示一段文字，然后使用background-break属性的不同的值来指定背景的循环方式。主要代码如下：<styletype="text/css">span{background-image:url(images/xiaohua.jpg);font-size:24px;font-weight:bold;line-height:1.5;}div.img1span{-moz-background-inline-policy:bounding-box;}div.img2span{-moz-background-inline-policy:each-box;}div.img3span{-moz-background-inline-policy:continuous;}</style><body><divclass="img1"><span>雨是最寻常的，一下就是三两天。可别恼，看，像牛毛，像花针，像细丝，密密地斜织着，人家屋顶上全笼着一层薄烟。树叶儿却绿得发亮，小草儿也青得逼你的眼。…</span></div>/*省略其他代码*/</body>1border-color属性2border-image属性3border-radius属性10.3边框样式在CSS2之前的版本中使用border属性只能设置纯色或者简单的线条（如solid、double、dashed等），而CSS3中添加了新的边框样式，可以使用图片设置边框样式和颜色，还可以添加阴影框，甚至可以实现创建圆角边框的功能。10.3.1border-color属性

border-color属性可以用来设置边框的颜色，在CSS3中border-color增加了许多功能，除了可以和CSS2之前版本中的border-color属性混合使用外，还可以为边框设置更多的颜色，比如给边框添加渐变颜色或者显示边框的彩色效果。例如下面代码演示了border-color属性的简单使用：<styletype="text/css">div.div1{width:500px;height:250px;border:35pxsolid;-moz-border-top-colors:#F00#F00#F00#F00#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)}</style><body><divclass="div1"><divclass="div2"></div></div></body>在之前border-color属性的基础上，CSS3中又增加了4种新的颜色属性。它们的具体说明如下：border-top-colors定义元素顶部边框的颜色border-right-colors定义元素右侧边框的颜色border-bottom-colors定义元素底部边框的颜色border-left-colors定义元素左侧边框的颜色10.3.2border-image属性

CSS3新增加的border-image属性功能非常强大，不仅解决了传统的使用背景图片设置边框样式的问题，减少了页面中的元素，还可以模拟实现background-image属性的功能。border-image:none|<image>[<number>|<percentage>]{1,4}[/<border-width>{1,4}]/[stretch|repeate|round]{0,2}

border-image属性的语法如下：其中比较常用的参数如下所示：none默认值，无背景图image使用相对或绝对路径定义背景图像number用来设置边框宽度，就像border-width一样取值，可以设置1-4个值，表示上、右、下、左四个方向。其默认单位是pxpercentage用来设置边框的宽度，主要是针对背景图像来说的。使用百分比表示stretch、repeat和round可选属性，用来设置边框背景图片的铺放方式。stretch是默认值，表示拉伸，repeat是重复，round是平铺

border-image属性值中至少必须指定5个参数，其中第一个参数为边框所使用的图像文件路径，接下来4个参数表示当浏览器自动的把边框所使用到的图像进行分隔时的上边距、右边距、下边距和左边距。10.4相片背景设置边框现在随着科技的进步，用手机就可以拍摄到很多自己满意的照片，可以通过自己的喜好给照片加上背景边框。10.3小节已经详细介绍过了CSS3中新增加的与边框相关的3个属性，本节将使用这些属性设置相片背景。首先在HTML页面中添加div元素用来显示图片，然后设置该div元素的background-clip、background-origin、background-image以及border-radius属性等实现相片背景效果。其最终运行效果如图3所示。图31线性渐变2径向渐变3重复渐变10.5渐变渐变是从一种颜色到另一种颜色的平滑过渡。在创建渐变的过程中可以指定多个中间颜色值，称为色标。每个色标包含一种颜色和一个位置，浏览器从每个色标的颜色淡出到下一个，以创建平滑的渐变。目前渐变主要包括线性渐变和径向渐变以及重复渐变。本节将主要学习这几种渐变的相关知识。10.5.1线性渐变在线性渐变的过程中颜色沿着一条直线过度：从左侧到右侧、从顶部到底部或者沿着任意轴。要创建线性渐变需要指定方向、起始颜色、结束颜色以及希望沿着这条线添加的任何色标。浏览器负责剩余工作，通过绘制与渐变线垂直的颜色线来填充整个元素。它生成从一种颜色到另一种颜色的平铺淡出，沿着所指定的方向渐变。-moz-linear-gradient([<point>||<angle>,]?<stop>,<stop>[,<stop>]*)//Mozilla引擎-o-linear-gradient([<point>||<angle>,]?<stop>,<stop>[,<stop>]*)//Opera引擎1.在Mozilla和Opera引擎下的一般应用线性渐变的语法如下：语法中主要有3个参数：第1个参数定义线性渐变的方向，可以使用参数point和angle表示。参数point表示起始方向，默认属性值为top，top表示从上到下、left表示从左到右，如果定义为“lefttop”表示从左上角到右下角；参数angle定义渐变的角度，主要包括deg（度，1圈等于360deg）、grad（梯度，90度等于100grad）、rad（弧度，1圈等于2*PIrad）。第2个参数表示起始颜色，第3个参数表示终点颜色。2.在Webkit引擎下的两种应用在Webkit引擎下实现颜色渐变的功能的语法主要有2种。第一种语法类似于在Mozilla和Opera引擎下的基本语法，只需要将代码书写为“-webkit-linear-gradient”的形式。语法格式如下所示：-webkit-linear-gradient([<point>||<angle>,]?<stop>,<stop>[,<stop>]*)//Webkit引擎10.5.2径向渐变径向渐变是圆形或者椭圆形渐变。颜色不在沿着一条直线轴变化，而是从一个起点朝所有方向混合。moz-radial-gradient([<point>||<angle>,]?[<shape>||<size>,]?<stop>,<stop>[,<stop>]*)-o-radial-gradient([<position>||<angle>,]?[<shape>||<size>,]?<stop>,<stop>[,<stop>]*)1.在Mozilla和Opera引擎下的一般应用径向渐变的语法如下：-webkit-radial-gradient([<point>||<angle>,]?[<shape>||<size>,]?<stop>,<stop>[,<stop>]*)2.在Webkit引擎下的两种应用上节介绍线性渐变的时候，我们学习过Webkit引擎浏览器下线性渐变的两种语法应用，本节介绍在Webkit引擎下径向渐变的两种不同的用法。第1种语法类似于在Mozilla和Opera引擎下的基本语法，只需要将代码书写为“-webkit-radial-gradient”的形式。语法格式如下所示：第2种语法可以定义渐变的类型为线性渐变（linear）和径向渐变（radial）。但是相对于线性渐变来说，径向渐变稍微复杂。另外，使用“-webkit-gradient”属性不仅可以定义渐变背景，还可以定义渐变边框、填充内容、以及设计图标等。10.5.3重复渐变如果需要创建一种在一个元素的背景上重复的渐变“模式”。虽然可以通过重复背景图像（使用background-repeat）创建线性重复渐变，但是没有创建重复的径向渐变的类似方式。在CSS3中通过repeating-linear-gradient和repeating-radial-gradient语法实现了重复渐变的功能。例如在HTML页面中添加两个div元素，然后分别实现重复线性渐变和重复径向渐变的效果。主要代码如下：<styletype="text/css">#div1{background:-webkit-repeating-linear-gradient(125deg,#f90,#f905px,#fc65px,#fc610px);background:-moz-repe

人人文库> 全部分类> 行业资料 > 信息产业

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论