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

《背景、边框和渐变的相关属性.pptx》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

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

2、简单的线性渐变、径向渐变和重复渐变1background-size属性2background-clip属性3background-origin属性4background-break属性10.1背景样式背景（background）属性是CSS3中使用频率最高的属性。在CSS3中增加了一些与背景相关的属性，它们分别是background-size属性、background-clip属性、background-origin属性和background-break属性。在本节中主要学习这4种属性的用法。10.1.1background-size属性在CSS2之

3、前的版本中无法控制背景图像的样式，如果要完整的显示背景图像，则需要设计好背景图片的大小。在CSS3中新增加的background-size属性可以用于指定背景图像的大小，很好的解决了之前的问题，使用户可以随意的控制背景图像的大小。background-size:auto

4、[

5、]

6、cover

7、containbackground-size属性的语法如下所示：其中比较常用的参数值如下所示：auto默认值，保持背景图像原有的宽度和高度length由浮点数字和单位标识符组成的长度值。其单位为px，不能为负值percent

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

9、rder）、补白区域（padding）和内容区域（content），以及外部补白边缘、边框边缘、补白边缘和内容边缘。它们之间的关系如图1所示。在CSS3中可以使用background-clip属性可以修改背景的显示范围或者背景的裁剪区域。background-clip属性的语法主要如下所示：background-clip：border-box

10、padding-box

11、content-box其中比较常用的参数值如下所示：border-box默认值，背景从border区域向外裁剪，超出border区域的背景被剪掉padding-box背景从padding

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

13、参考位置。如果是border值，则在border边缘显示；如果是padding值，则背景图像的位置在padding边缘显示；如果是content值，则背景图像会以内容边缘作为起点；多个背景图像对应的background-origin值使用逗号隔开。background-origin：border-box

14、padding-box

15、content-box其中主要的参数如下所示：border-box默认值，从border区域开始显示背景padding-box从padding区域开始显示背景content-box从content区域开始显示背景10.1.4b

16、ackground-break属性在CSS3中可以使用background-break属性来指定平铺内联元素