CSS3的背景、边框和边距相关属性

阅读量：4149 次

发布时间：2019-05-25

本文共 6805 字，大约阅读时间需要 22 分钟。

CSS3 包含多个新的背景属性，它们提供了对背景更强大的控制，进一步增强了背景功能，这些属性可以控制背景图片的显示位置、分布方式等；除此之外，CSS3还新增了多背景图片支持，从而允许我们在HTML组件中定义多个背景图片。CSS3还新增了大量边框相关属性，通过这些属性可以让我们定义圆角边框、渐变边框、图片边框等。

背景相关属性

背景相关属性用于控制背景色、背景图片等属性。在控制背景图片的同时，还可控制背景图片的排列方式。有如下几个常用的背景相关属性。

background：设置对象的背景样式。该属性是一个复合属性，可用于同时设置背景色、背景图片、背景重复模式等属性。为了更好地控制背景，一般不建议通过该属性来控制背景。

background-attachment：设置背景图片是随对象内容滚动还是固定的。在指定该属性之前，必须先指定background-image属性。该属性有如下两个值。scroll：指定背景图片会随组件里内容的滚动而滚动。这是默认值。fixed：背景图片固定，不会随组件里内容的滚动而滚动。

background-color：用于设置背景色。如果同时设置了背景色和背景图片，则背景图片将覆盖背景色。

background-image：用于设置背景图片。如果同时设置了背景色和背景图片，则背景图片将覆盖背景色。该属性需要使用url()函数指定图片地址，图片地址既可以是相对地址，也可以是绝对地址。

background-position：用于设置对象的背景图片位置，该属性值应该是两个值，它们既可是实际的长度值，也可是百分比。如果只指定了一个值，该值将对应横坐标，纵坐标将默认为50%；如果指定了两个值，那么第二个值将对应纵坐标。在指定该属性之前，必须先指定background-image属性。

background-repeat：适用于CSS1，用于设置对象的背景图片是否平铺。在指定该属性之前，必须先指定background-image属性。该属性有repeat、no-repeat、repeat-x、repeaty 4个值，分别对应在纵向和横向同时平铺、不平铺、仅在横向平铺、仅在纵向平铺。

下方的图就展示了这些背景相关属性的效果，源码可在我的资源库中下载

1.背景图片固定

在默认情况下，组件里的背景图片会随着滚动条的滚动而自动移动，但如果把background-attachment属性设为fixed，那么背景图片就会被固定在该组件中，不会随着滚动条的滚动而移动。下方图片示范了背景固定的效果：

2.CSS3新增的背景相关属性

CSS3新增了如下几个背景相关属性：

background-clip	用于设置背景覆盖的范围。
background-origin	用于设置背景覆盖的起点，该属性与前面介绍的background-position有些相似。
background-size	用于设置背景图片的大小。该属性由两个值组成，分别代表图片的宽度、高度。宽度、高度支持如下3种写法：长度值（px）、百分比（%）、auto（保持纵横比缩放）
background-repeat新增的space和round	保证背景图片不会被裁剪，完整的显示出来。

2.1 background-clip

背景的覆盖范围由background-clip属性指定，该属性支持如下几个属性值。

border-box：指定背景覆盖边框区（border）、内补丁区（padding）、内容区（content）。

no-clip：指定背景覆盖边框区（border）、内补丁区（padding）、内容区（content）。

padding-box：指定背景覆盖内补丁区（padding）、内容区（content）。

content-box：指定背景只覆盖内容区（content）。

2.2 background-origin

background-origin属性用于指定背景从哪里覆盖，可以指定如下几个属性值。

border：指定背景图片从边框区开始覆盖。

padding：指定背景图片从内补丁区开始覆盖。

content：指定背景图片从内容区开始覆盖。

需要指出的是，Firefox、Opera的最新版本暂不支持该属性，在Chrome、Safari中使用该属性时要把该属性写成-webkit-background-origin。如下示范了background-origin属性的功能。

2.3 background-size

在以前，当我们为HTML元素设置背景图片，该图片铺到该组件上时，图片的大小总是该图片的原始大小。CSS3的出现改变了这种现状，background-size属性可控制背景图片的大小

2.4 background-repeat新增的space和round

CSS3为background-repeat新增的space和round两个属性都用于保证背景图片不会被裁剪，它们之间的区别在于：round会自动调整背景图片的大小，从而保证HTML的元素内平铺每一个背景图片都能完整的显示出来；而space则不会调整背景图片的大小，它只是调整背景图片的间距。

3.CSS3新增的多背景图片

在CSS3以前，每个组件只能指定一种背景图片，如果同时指定了背景颜色和背景图片，那么背景图片会覆盖背景颜色。CSS3允许同时指定多个背景图片，这些背景图片会依次覆盖。CSS3并没有为多背景图片支持提供额外的属性，多背景图片依然是通过background-image、background-repeat、background-position、background-size等属性来控制的，只是CSS 3允许指定多个属性值（多个属性值之间以英文逗号隔开），这样即可实现多背景图片的效果。下方图片展示了多背景图片的效果：

边框相关属性

边框相关属性用于设置目标对象的边框特征，包括边框颜色、粗细，以及使用的线型。边框相关属性有如下几个：

border	这是一个复合属性，用于设置目标组件的边框样式。可同时设置边框的粗细、线型、颜色。
border-color	用于设置组件的边框颜色。如果提供4个参数值，则将按上、右、下、左的顺序一次设置4个边框的颜色；如果只提供1个参数值，则将用于设置4个边框的颜色；如果提供2个参数值，则第一个用于设置上、下两个边框的颜色；第二个用于设置左、右两个边框的颜色；如果提供3个参数值，则第一个用于设置上边框的颜色，第二个用于设置左、右两个边框的颜色，第三个用于设置下边框的颜色。
border-style	用于设置组件的边框线型。如果提供4个参数值，则将按上、右、下、左的顺序依次设置4个边框的线型；如果只提供1个参数值，则将用于设置4个边框的线型；如果提供2个参数值，则第一个用于设置上、下两个边框的线型，第二个用于设置左、右两个边框的线型；如果提供3个参数值，则第一个用于设置上边框的线型，第二个用于设置左、右两个边框的线型，第三个用于设置下边框的线型。
border-width	用于设置目标组件的边框线宽。如果提供4个参数值，则将按上、右、下、左的顺序依次设置4个边框的线宽；如果只提供1个参数值，则将用于设置4个边框的线宽；如果提供2个参数值，则第一个用于设置上、下两个边框的线宽，第二个用于设置左、右两个边框的线宽；如果提供3个参数值，则第一个用于设置上边框的线宽，第二个用于设置左、右两个边框的线宽，第三个用于设置下边框的线宽。
border-top	这是一个复合属性，用于设置目标组件的上边框样式。可同时设置边框的粗细、线型、颜色。
border-top-color	用于设置目标组件的上边框颜色。
border-top-style	用于设置目标组件的上边框线型。
border-top-width	用于设置目标组件的上边框线宽。
border-right	这是一个复合属性，用于设置目标组件的右边框样式。可同时设置边框的粗细、线型、颜色。
border-right-color	用于设置目标组件的右边框颜色。
border-right-style	用于设置目标组件的右边框线型。
border-right-width	用于设置目标组件的右边框线宽。
border-bottom	这是一个复合属性，用于设置目标组件的下边框样式。可同时设置边框的粗细、线型、颜色。
border-bottom-color	用于设置目标组件的下边框颜色。
border-bottom-style	用于设置目标组件的下边框线型。
border-bottom-width	用于设置目标组件的下边框线宽。
border-left	这是一个复合属性，用于设置目标组件的左边框样式。可同时设置边框的粗细、线型、颜色。
border-left-color	用于设置目标组件的左边框颜色。
border-left-style	用于设置目标组件的左边框线型。
border-left-width	用于设置目标组件的左边框线宽。在上面的边框相关属性中，边框颜色可以是任何有效的颜色值，而线宽可以是任何有效的长度值。线型可以支持这些属性（ none：无边框。hidden：隐藏边框。dotted：点线边框。dashed：虚线边框。 solid：实线边框。double：双线边框。groove：3D凹槽边框。ridge：3D凸槽边框。inset：3D凹入边框。 outset：3D凸出边框。）

虽然提供了这么多线型，但不是每个浏览器中都可以看出全部线型的效果。下方图片分别使用了不同的边框属性，用于演示线型、线宽、颜色等属性控制边框后的效果。为了更好地看出边框效果，页面还用CSS设置了<div.../>元素的大小。

1.CSS3提供的渐变边框

CSS3提供了如下4个属性来支持渐变边框：

border-top-colors：该属性用于设置目标组件的上边框颜色。如果设置上边框的宽度是Npx，那么就可以为该属性设置N种颜色，每种颜色显示1px的宽度。但如果设置的颜色数量小于边框的宽度，那么最后一个颜色将会覆盖该边框剩下的宽度。假如边框的宽度是10x，如果该属性只声明了5或6种颜色，那么最后一个颜色将会覆盖该边框剩下的宽度。

border-right-colors：该属性用于设置目标组件的右边框颜色。该属性指定的多个颜色值的意义与border-top-colors属性里各颜色值的意义相同。

border-bottom-colors：该属性用于设置目标组件的下边框颜色。该属性指定的多个颜色值的意义与border-top-colors属性里各颜色值的意义相同。

border-left-colors：该属性用于设置目标组件的左边框颜色。该属性指定的多个颜色值的意义与border-top-colors属性里各颜色值的意义相同。

需要指出的是，这4个属性目前只有Firefox浏览器才支持，而且使用该属性时必须在前面增加-moz-前缀。如下图片展示了CSS3提供的渐变边框效果。

2.CSS3提供的圆角边框

CSS3为支持圆角边框提供了如下属性：

border-radius：该属性用于指定圆角边框的圆角半径（半径越大，圆角的程度越大）。如果该属性指定1个长度，则4个圆角都使用该长度作为半径；如果指定2个长度，则第一个长度将作为左上角、右下角的半径；第二个长度将作为右上角、左下角的半径；如果指定3个长度，则第一个长度将作为左上角的半径，第二个长度将作为右上角、左下角的半径；第三个长度将作为右下角的半径。

border-top-left-radius：该属性用于指定左上角的圆角半径。

border-top-right-radius：该属性用于指定右上角的圆角半径。

border-bottom-right-radius：该属性用于指定右下角的圆角半径。

border-bottom-left-radius：该属性用于指定左下角的圆角半径。

下方图片展示了圆角边框的功能，有几个不同类型的圆角边框。

3.CSS3提供的图片边框

CSS 3为图片边框提供了如下属性：

border-image：该属性的值比较复杂，应该遵守如下格式：

上面语法格式可分为4个部分。

border-image-source：指定边框图片。该值可以是none（没有边框图片）或使用url()函数指定图片。

border-image-slice：该属性值可指定1～4个数值或百分比数值，这4个数值用于控制如何对边框图片进行切割。假设指定了10 20 30 40，这4个数值分别指定切割边框图片时上边框为10像素，右边框为20像素，下边框为30像素，左边框为40像素。切割示意图如下图所示。

border-image-width：该属性用于指定图片边框的宽度。该属性值可指定1～4个长度值、数值、百分比数值或auto。如果为border-image-slice只指定了1个值，则4个边框的宽度都等于该值；如果指定了2个值，那么第一个值将作为上、下边框的宽度，第二个值将作为左、右边框的宽度；如果指定了3个值，则第一个值将作为上边框的宽度，第二个值将作为左、右边框的宽度，第三个值将作为下边框的宽度。

border-image-repeat：该属性用于指定边框图片的覆盖方式，支持stretch（拉伸覆盖）、repeat（平铺覆盖）、round（取整平铺）三种覆盖方式。该属性可指定两个值，分别代表横向、纵向覆盖方式。

小提示：repeat与round覆盖方式基本相似，区别在于：round方式多了这样的处理——如果最后一个边框图片不能完全显示，且最后一个边框图片能显示的区域不到一半，就不显示最后的边框图片，然后扩大前面的图片，让它们能完全覆盖显示区域；如果最后一个边框图片不能完全显示，且最后一个边框片能显示的区域超过一半，就显示最后的边框图片，然后稍微缩小前面的所有图片，让它们和最后一个图片能完全显示出来。

下方图片展示了图片边框的功能，通过一张图片去设置border-image属性。

使用opacity控制透明度

opacity用于设置整个HTML的透明度，不管是背景色、前景色还是边框都会受到影响。opacity属性的值从0到1，其中0代表完全透明，1代表完全不透明。下方图片将展示出opacity属性的作用：

padding和margin相关属性

一个组件由元素内容区（content）、内补丁区（padding）、边框区（border）、外补丁区（margin）4个区域组成。其中内补丁区是该组件的内容与边框之间的距离，外补丁区是该组件边框之外的空白。内补丁区和外补丁区的颜色总是透明的。

1.内填充相关属性

内补丁相关属性有如下几个：

padding：该属性可以同时设置上、下、左、右4个边的内补丁距离。该属性允许设置4个长度，分别对应于上、下、左、右4个边的内补丁距离；如果只设置了1个长度，则该值将作为上、下、左、右4个边的内补丁距离；如果设置了2个长度，则前一个长度将作为上、下边的内补丁距离，后一个长度将作为左、右边的内补丁距离；如果设置了3个长度，则第一个长度将作为上边的内补丁距离，第二个长度将作为左、右边的内补丁距离，第三个长度将作为、下边的内补丁距离。

padding-top：设置上边的内补丁距离。

padding-right：设置右边的内补丁距离。

padding-bottom：设置下边的内补丁距离。

padding-left：设置左边的内补丁距离。

2. 外边距相关属性

外补丁相关属性有如下几个：

margin：该属性可以同时设置上、下、左、右4个边的外补丁距离。该属性允许设置4个长度，分别对应于上、下、左、右4个边的外补丁距离；如果只设置了1个长度，则该值将作为上、下、左、右4个边的外补丁距离；如果设置了2个长度，则前一个长度将作为上、下边的外补丁距离，后一个长度将作为左、右边的外补丁距离；如果设置了3个长度，则第一个长度将作为上边的外补丁距离，第二个长度将作为左、右边的外补丁距离，第三个长度将作为下边的外补丁距离。