HTML5+CSS3+JavaS教学幻灯片11

1、第11章 背景与边框本章内容o 11.1 背景相关属性o 11.2 边框o 11.3 边框圆角o 11.4 图片边框o 11.5 综合实例简单公司主页11.1 背景相关属性o 11.1.1 背景颜色o 11.1.2 背景图片o 11.1.3 背景图片重复o 11.1.4 背景图片显示o 11.1.5 背景图片位置o 11.1.6 背景图片大小o 11.1.7 背景显示区域o 11.1.8 背景图像裁剪区域o 11.1.9 背景复合属性11.1.1 背景颜色obackground-color属性用于设定网页背景色，同设置前景色的color属性一样，background-color属性接受任何有效

2、的颜色值，而对于没有设定背景色的标记，默认背景色为透明（tranaparent）。其语法格式为background-color : transparent | color。o实例：11.1.htmlobackground-color不仅可以设置整个网页的背景颜色，同样还可以设置指定HTML元素的背景色，例如设置h1标题的背景色，设置段落p的背景色。可以想象，在一个网页，可以根据需要，设置不同HTML元素的背景色。o实例：11.2.html11.1.2 背景图片o网页中不但可以使用背景色来填充网页背景，同样也可以使用背景图片来填充网页。通过CSS3属性可以对背景图片进行精确定位。backgrou

3、nd-image属性用于设定标记的背景图片，通常情况下，在标记中应用，将图片用于整个主体中。background-image语法格式为background-image : none | url (url)。o实例：11.3.html11.1.3 背景图片重复o在进行网页设计时，通常都是一个网页使用一张背景图片，如果图片大小小于背景图片时，会直接重复铺满整个网页，但这种方式不适用于大多数页面，在CSS3中可以通过background-repeat属性设置图片的重复方式，包括水平重复、垂直重复和不重复等。o实例：11.4.html11.1.4 背景图片显示obackground-attachmen

4、t属性用来设定背景图片是否随文档一起滚动。该属性包含两个属性值：scroll和fixed，并适用于所有元素。o实例：11.5.html11.1.5 背景图片位置obackground-position属性用于指定背景图片在页面中所处位置。该属性值可以分为四类：绝对定义位置（length）、百分比定义位置（percentage）、垂直对齐值和水平对齐值。其中垂直对齐值包括top、center和bottom，水平对齐值包括left、center和right。o实例：11.6.html11.1.6 背景图片大小oCSS3中，新增了一个background-size属性，用来控制背景图片大小，从而降低

5、网页设计的开发成本。background-size语法格式为background-size ： | | auto 1,2 | cover | contain。o实例：11.11.html11.1.7 背景显示区域o在CSS3中，新增了一个background-origin属性，用来完成背景图片的定位。默认情况下，background-position属性总是以元素左上角原点作为背景图像定位，适应background-origin属性可以改变这种定位方式。background-origin ： border | padding | content。o实例：11.8.html11.1.8 背景图像

6、裁剪区域o在CSS3中，新增了一个background-clip属性，用来定义背景图片的裁剪区域。通俗的说，background-clip属性用来判断背景十分包含边框区域，而background-orgin属性用来决定background-position属性定位的参考位置。background-clip语法格式为background-clip ： border-box | padding-box | content-box | no-clip。o实例：11.9.html11.1.9 背景复合属性o在CSS3中，background属性依然保持了一起的用法，即综合了以上所有与背景有关的属性（即

7、以back-ground-开头的属性），可以一次性地设定背景样式。格式如下：background:background-color background-image background-repeat background-attachment background-positionbackground-size background-clip background-origin。11.2 边框 o 11.2.1 边框样式o 11.2.2 边框颜色o 11.2.3 边框线宽o 11.2.4 边框复合属性11.2.1 边框样式oborder-style属性用于设定边框的样式，也就是风格。设定边框

8、格式是边框最重要的部分，它主要用于为页面元素添加边框。其语法格式为border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset。o实例：11.10.html11.2.2 边框颜色oborder-color属性用于设定边框颜色，如果不想与页面元素的颜色相同，则可以使用该属性为边框定义其他颜色。border-color属性语法格式为border-color : color。o实例：11.11.html11.2.3 边框线宽o在CSS3中，可以通过设定边框宽带，来增强

9、边框效果。border-width属性就是用来设定边框宽度，其语法格式为border-width : medium | thin | thick | length。o实例：11.12.html11.2.4 边框复合属性oborder属性集合了上述所介绍的三种属性，为页面元素设定边框的宽度、样式和颜色。语法格式为border : border-width | border-style | border-color，其中，三个属性顺序可以自由调换。o实例：11.14.html11.3 边框圆角o 11.3.1 圆角边框o 11.3.2 指定两个圆角半径o 11.3.3 绘制四个不同圆角边框o 11

10、.3.4 绘制边框种类11.3.1 圆角边框o在CSS3中，可以使用border-radius属性定义边框的圆角效果，从而大大降低了圆角开发成本。border-radius的语法格式为border-radius ： none | 1,4 / 1,4 。o实例：11.15.html11.3.2 指定两个圆角半径o可以使用border-radius属性设置了一个参数用来绘制圆角，同样还可以使用两个参数绘制圆角。border-radius属性可以包含两个参数值：第一个参数表示圆角的水平半径，第二个参数表示圆角的垂直半径，两个参数通过斜线（“/”）隔开。如果仅含一个参数值，则第二个值与第一个值相同，表

11、示这个叫就是一个1/4的圆。如果参数值中包含0，则这个值就是矩形，不会显示为圆角。o实例：11.16.html11.3.3 绘制四个不同圆角边框o第一种方法就是利用border-radius属性，为其赋一组值。当为border-radius属性赋一组值，将遵循CSS规则，可以包含2到4个属性值，此时无法使用斜杠定义圆角水平和垂直半径。o实例：11.111.htmlo可以使用等border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius和border-top-left-radius属性单独为相应的边框设置

12、圆角。o实例：11.18.html11.3.4 绘制边框种类oborder-radius属性可以根据不同半径值，来绘制不同的圆角边框。同样也可以利用border-radius来定义边框内部的圆角，即内圆角。需要注意的是，外部圆角边框的半径称为外半径，内边半径等于外边半径减去对应边的宽度，即将边框内部的圆的半径称为内半径。o实例：11.19.html11.4 图片边框o 11.4.1 图片边框属性 o 11.4.2 设置图像边框显示方式 o 11.4.3 图像边框重复性解析 11.4.1 图像边框属性 oborder-image是CSS3新增核心属性之一，也是一个非常实用的属性，它可以设置bor

13、der边框的背景图。但可惜的是，目前浏览器对其支持不是太好。border-image语法格式为border-image ： none | | 1,4 / 1,4 ? stretch | repeat | round 0,2。o为了方便设计师更灵活的定义边框的背景图像，CSS3允许将border-image属性派生了众多的子属性，一方面CSS3将border-image分成了8部分，使用8个子属性分别定义特定方位上边框的背景图像。 11.4.2 设置图像边框显示方式 o可以看出border-image是一个复合属性，包含图像源、剪裁位置、和重复性。例如，border-image:url(1.jpg) 50 no-repeat样式就表示边框背景图像为1.jpg，剪裁位置50像素，禁止重复。border-image属性使用url()调用背景图像，图像可以是相对路径或者绝对路径 ，也可以不适用图像，即border-image:none。o实例：11.20.html11.4