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

第10章 背景、边框和渐变的相关属性 内容简介 CSS 3具有非常强大的功能，它不仅使页面代码更加简洁、结构更加合理，而且使性能和效果都得到了更好的体现。上一章我们已经学习了CSS样式和选择器，本章将主要介绍CSS 3的背景、边框和渐变的相关属性，以及如何在一个元素中实现显示多个背景图像，如何设置图片的边框和绘制圆角边框等功能。 本章学习要点 掌握CSS 3中与背景样式有关的属性 掌握CSS 3中与边框样式有关的属性 掌握CSS 3中渐变最常用的属性 了解CSS 3中与背景、边框和渐变的相关属性在各种浏览器的兼容情况 熟练使用border-radius属性绘制圆角边框 掌握如何实现简单的线性渐变、径向渐变和重复渐变 background-size属性 background-clip属性 background-origin属性 background-break属性 10.1 背景样式 背景（background）属性是CSS 3中使用频率最高的属性。在CSS 3中增加了一些与背景相关的属性，它们分别是background-size属性、background-clip属性、background-origin属性和background-break属性。在本节中主要学习这4种属性的用法。 10.1.1 background-size属性 在CSS 2之前的版本中无法控制背景图像的样式，如果要完整的显示背景图像，则需要设计好背景图片的大小。在CSS 3中新增加的background-size属性可以用于指定背景图像的大小，很好的解决了之前的问题，使用户可以随意的控制背景图像的大小。 background-size: auto | [ length | percentage ] | cover | contain background-size属性的语法如下所示： 其中比较常用的参数值如下所示： auto 默认值，保持背景图像原有的宽度和高度 length 由浮点数字和单位标识符组成的长度值。其单位为px，不能为负值 percentage 百分值，可以是0%~100%之间的任何值，不可为负值 cover 保持图像本身的宽度和高度，当图像小于容器又无法使用background-repeat来实现时，就可以使用cover将图像放大以铺满整个容器，但是这种方法会使背景图像失真 contain 保持图像本身的宽度和高度，当图像大于容器而又需要将背景图片全部显示出来时，就可以使用contain将图像缩小到适合容器大小，但是这种方法也会使背景图像失真 10.1.2 background-clip属性 在HTML页面中对于任何元素来说，它都会包含四个区域和边缘，即外部补白区域（margin）、边框区域（border）、补白区域（padding）和内容区域（content），以及外部补白边缘、边框边缘、补白边缘和内容边缘。它们之间的关系如图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区域向外裁剪，超过content区域的背景将被裁剪掉 图1 10.1.3 background-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