HTML5应用开发和 与实践课件第11章CSS3美化背景和 与边框.ppt

【例11-6】 定义3个div标记，并且为这3个div标记设置不同的background-clip属性。 style div{ background-image: url(android.png);/*设置背景图片*/ height:63px; border:8px dashed #333; /*设置虚线边框*/ margin:10px; /*设置外边距*/ padding:8px; /*设置内边距*/ } #id1 { background-clip:border-box; /*从border区域（不含border）开始向外裁剪背景*/ } #id2 { background-clip:padding-box; /*从padding区域（不含padding）开始向外裁剪背景*/ } #id3 { background-clip:content-box; /*从content区域开始向外裁剪背景*/ } /style 本实例的运行结果如图11-8所示。 图11-8 background-clip的属性示例 2．指定背景图像的起点——background-origin 在CSS 3之前，背景图像的起点是从边框以内的开始的，而在CSS 3中，提供了background-origin属性，用于指定图像的起始点，也就是从哪里开始显示背景图像。 background-origin属性的语法格式如下： background-origin：border-box | padding-box | content-box border-box：从border区域（含border）开始显示背景图像； padding-box：从padding区域（含padding）开始显示背景图像； content-box：从content区域开始显示背景图像。 【例11-7】 定义3个div标记，并且为这3个div标记设置不同的background-origin属性。 style div{ background-image: url(android.png);/*设置背景图像*/ background-repeat:no-repeat; /*背景图像不重复*/ height:63px; border:8px dashed #333; /*设置虚线边框*/ margin:10px; /*设置外边距*/ padding:8px; /*设置内边距*/ } #id1 { background-origin:border-box; /*从border区域（不含border）开始向外裁剪背景*/ } #id2 { background-origin:padding-box; /*从padding区域（不含padding）开始向外裁剪背景*/ } #id3 { background-origin:content-box; /*从content区域开始向外裁剪背景*/ } /style 本实例的运行结果如图11-9所示。 图11-9 background-origin的属性示例 3．指定背景图像的尺寸——background-size 在CSS 3之前，设置的背景图像都是以原始尺寸显示的。不过，在CSS 3中，提供了用于指定背景图像的background-size属性。background-size属性的语法格式如下： background-size：[ length | percentage | auto ] | cover | contain length：由浮点数字和单位标识符组成的长度值，不可为负值。该参数可以设置一个值，也可以设置两个值，如果只设置一个值，那么为宽度值，图像将进行等比例缩放，否则分别为宽度值和高度值； percentage：取值为0%到100%之间的值，不可为负值。该参数可以设置一个值，也可以设置两个值，如果只设置一个值，那么为宽度的百分比，图像将进行等比例缩放，否则分别为宽度的百分比和高度的百分比； auto：背景图像的原始尺寸； cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器； contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。 【例11-8】 定义3个div标记，并且为这3个div标记设置不同的background-size属性。 style div{ background-image: url(android.png);/*设置背景图片*/ height:63px; border:1px dashed